'use client'

import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import type { BlogCategoryFilter } from '@/lib/db/queries/getBlogPosts'

interface BlogCategoriesProps {
  categories: BlogCategoryFilter[]
  totalCount: number
  activeCategory: string | null
}

// Presentational chip list, fed by getBlogSidebarData()'s real, per-category
// post counts (see DATA_FETCHING_PATTERN.md) — no more hardcoded array.
// `activeCategory` comes from the URL (blogs/page.tsx's searchParams), so
// this needs no client-only hook of its own.
export default function BlogCategories({ categories, totalCount, activeCategory }: BlogCategoriesProps) {
  const t = useTranslations('Blog')

  return (
    <div className="flex flex-wrap gap-2 mb-8 pb-4 border-b border-gray-100">
      <Link
        href="/blogs"
        className={`px-4 py-2 rounded-full text-sm font-medium transition ${
          !activeCategory
            ? 'bg-primary text-white'
            : 'bg-gray-100 text-dark hover:bg-primary/10 hover:text-primary'
        }`}
      >
        {t('allCategory')}
        <span className="ml-1 text-xs opacity-70">({totalCount})</span>
      </Link>
      {categories.map((category) => (
        <Link
          key={category.id}
          href={{ pathname: '/blogs', query: { category: category.slug } }}
          className={`px-4 py-2 rounded-full text-sm font-medium transition ${
            activeCategory === category.slug
              ? 'bg-primary text-white'
              : 'bg-gray-100 text-dark hover:bg-primary/10 hover:text-primary'
          }`}
        >
          {category.name}
          <span className="ml-1 text-xs opacity-70">({category.count})</span>
        </Link>
      ))}
    </div>
  )
}