---
/**
 * CategoryFilter - Blog category filter component
 * Displays category filter buttons with active state
 */

interface Category {
  id: string
  title: string
  slug: string
  backgroundColor?: string
  textColor?: string
}

interface Props {
  categories: Category[]
  activeCategory?: string | null
  baseUrl?: string
}

const { categories, activeCategory, baseUrl = '/news' } = Astro.props

// Filter out the legacy "文章分類" container category
const filteredCategories = categories.filter(c => c.slug !== 'wen-zhang-fen-lei')
---

<nav class="py-4 mb-8" aria-label="文章分類篩選">
  <div class="flex flex-wrap justify-center gap-3 md:gap-2 max-w-[1200px] mx-auto">
    <a
      href={baseUrl}
      class:list={["inline-flex items-center justify-center px-5 py-2.5 md:px-4 md:py-2 border-2 border-[var(--color-gray-300)] rounded-3xl bg-white text-[var(--color-gray-700)] font-['Noto_Sans_TC'] text-[0.9375rem] md:text-sm font-medium no-underline whitespace-nowrap transition-all duration-[250ms] hover:border-[var(--color-enchunblue)] hover:text-[var(--color-enchunblue)] hover:bg-[rgba(35,96,140,0.05)]", { "bg-[var(--color-enchunblue)] border-[var(--color-enchunblue)] text-white hover:bg-[var(--color-enchunblue-hover)] hover:border-[var(--color-enchunblue-hover)]": !activeCategory }]}
    >
      全部文章
    </a>

    {
      filteredCategories.map((category) => (
        <a
          href={`/wen-zhang-fen-lei/${category.slug}`}
          class:list={["inline-flex items-center justify-center px-5 py-2.5 md:px-4 md:py-2 border-2 border-[var(--color-gray-300)] rounded-3xl bg-white text-[var(--color-gray-700)] font-['Noto_Sans_TC'] text-[0.9375rem] md:text-sm font-medium no-underline whitespace-nowrap transition-all duration-[250ms] hover:border-[var(--color-enchunblue)] hover:text-[var(--color-enchunblue)] hover:bg-[rgba(35,96,140,0.05)]", { "bg-[var(--color-enchunblue)] border-[var(--color-enchunblue)] text-white hover:bg-[var(--color-enchunblue-hover)] hover:border-[var(--color-enchunblue-hover)]": activeCategory === category.slug }]}
          aria-label={`篩選 ${category.title} 類別文章`}
        >
          {category.title}
        </a>
      ))
    }
  </div>
</nav>
