import clsx from 'clsx';
import type { Category } from '@/types';

interface CategoryTabsProps {
  categories: Category[];
  selectedCategoryId: string | null;
  onSelect: (categoryId: string | null) => void;
}

export function CategoryTabs({ categories, selectedCategoryId, onSelect }: CategoryTabsProps) {
  return (
    <div className="flex gap-2 overflow-x-auto no-scrollbar py-2 px-4 bg-white border-b">
      <button
        className={clsx(
          'px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors',
          selectedCategoryId === null
            ? 'bg-primary-500 text-white'
            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
        )}
        onClick={() => onSelect(null)}
      >
        Todos
      </button>

      <button
        className={clsx(
          'px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors',
          selectedCategoryId === 'favorites'
            ? 'bg-yellow-400 text-white'
            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
        )}
        onClick={() => onSelect('favorites')}
      >
        Favoritos
      </button>

      {categories.map((category) => (
        <button
          key={category.id}
          className={clsx(
            'px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors',
            selectedCategoryId === category.id
              ? 'bg-primary-500 text-white'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          )}
          style={
            selectedCategoryId === category.id && category.color
              ? { backgroundColor: category.color }
              : undefined
          }
          onClick={() => onSelect(category.id)}
        >
          {category.name}
        </button>
      ))}
    </div>
  );
}
