'use client'

import type { BacklogCategory, CategoryProgress } from '../types'

interface CategoryCardsProps {
  categories: BacklogCategory[]
  selectedCategory: string | null
  onSelectCategory: (id: string | null) => void
  getCategoryProgress: (categoryId: string) => CategoryProgress
}

export function CategoryCards({
  categories,
  selectedCategory,
  onSelectCategory,
  getCategoryProgress,
}: CategoryCardsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
      {categories.map((cat) => {
        const catProgress = getCategoryProgress(cat.id)
        return (
          <button
            key={cat.id}
            onClick={() => onSelectCategory(selectedCategory === cat.id ? null : cat.id)}
            className={`p-3 rounded-xl border-2 text-left transition-all ${
              selectedCategory === cat.id
                ? `${cat.bgColor} ring-2 ring-offset-2`
                : 'bg-white border-slate-200 hover:border-slate-300'
            }`}
          >
            <div className="flex items-center gap-2 mb-1">
              <span className={selectedCategory === cat.id ? cat.color : 'text-slate-500'}>
                {cat.icon}
              </span>
              <span className="font-medium text-xs truncate">{cat.name}</span>
            </div>
            <div className="text-xs text-slate-500">
              {catProgress.completed}/{catProgress.total}
            </div>
          </button>
        )
      })}
    </div>
  )
}
