---
import Icon from '@ui/Icon.astro'
import icons from '@data/icons.json'
import CardTitle from '@ui/CardTitle.astro'

interface Props {
  title?: string
  type?: 'outline' | 'filled'
}

const { title, type = 'outline' } = Astro.props

// The dev server renders only the first 20 icons so the page stays fast;
// `astro build` (the zip package and production site) renders all of them.
const limit = import.meta.env.DEV ? 20 : Infinity

const entries = Object.entries(icons as Record<string, { svg?: Record<string, string | null> }>)
  .filter(([, icon]) => icon.svg?.[type])
  .slice(0, limit)
---

<div class="card">
  <div class="card-header">
    <CardTitle>{title}</CardTitle>
  </div>
  <div class="card-body p-0">
    <div class="demo-icons-list-wrap">
      <div class="demo-icons-list">
        {
          entries.map(
            ([iconName, icon]) =>
              icon.svg?.[type] && (
                <a href={`https://tabler.io/icons/icon/${iconName}`} target="_blank" rel="noopener" class="demo-icons-list-item" title={iconName} data-bs-toggle="tooltip" data-bs-placement="top">
                  <Icon name={iconName} filled={type === 'filled'} />
                </a>
              ),
          )
        }
        {/* 21 empty divs (flexbox filler) */}
        {Array.from({ length: 21 }).map(() => <div />)}
      </div>
    </div>
  </div>
</div>