'use client';

import { Category, SortOption } from '@/types';
import { cn } from '@/lib/utils';
import { SlidersHorizontal } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

interface ShopFiltersProps {
  selectedCategory: Category | 'all';
  onCategoryChange: (category: Category | 'all') => void;
  sortBy: SortOption;
  onSortChange: (sort: SortOption) => void;
  searchQuery: string;
  onSearchChange: (query: string) => void;
  totalResults: number;
}

export default function ShopFilters({
  selectedCategory,
  onCategoryChange,
  sortBy,
  onSortChange,
  searchQuery,
  onSearchChange,
  totalResults,
}: ShopFiltersProps) {
  const { t } = useTranslation();

  const categories: { value: Category | 'all'; label: string }[] = [
    { value: 'all', label: t('shop.all') },
    { value: 'chicken', label: t('nav.chicken') },
    { value: 'beef', label: t('nav.beef') },
    { value: 'lamb', label: t('nav.lamb') },
    { value: 'fish', label: t('nav.fish') },
  ];

  const sortOptions: { value: SortOption; label: string }[] = [
    { value: 'featured', label: t('shop.sortFeatured') },
    { value: 'price-asc', label: t('shop.sortPriceAsc') },
    { value: 'price-desc', label: t('shop.sortPriceDesc') },
    { value: 'name', label: t('shop.sortName') },
  ];

  return (
    <div className="space-y-6">
      <div>
        <div className="mb-3 flex items-center gap-2">
          <SlidersHorizontal className="h-4 w-4 text-brand-700" />
          <h2 className="text-sm font-semibold text-brand-900">{t('shop.filters')}</h2>
        </div>
        <p className="text-xs text-gray-500">
          {t('shop.productsFound', { count: totalResults })}
        </p>
      </div>

      <div>
        <label htmlFor="search" className="label-text">
          {t('shop.search')}
        </label>
        <input
          id="search"
          type="text"
          placeholder={t('shop.searchPlaceholder')}
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="input-field"
        />
      </div>

      <div>
        <p className="label-text">{t('shop.category')}</p>
        <div className="flex flex-wrap gap-2">
          {categories.map((cat) => (
            <button
              key={cat.value}
              onClick={() => onCategoryChange(cat.value)}
              className={cn(
                'rounded-full px-4 py-2 text-sm font-medium transition-all',
                selectedCategory === cat.value
                  ? 'bg-brand-700 text-white shadow-premium'
                  : 'bg-gray-100 text-gray-600 hover:bg-brand-50 hover:text-brand-700'
              )}
            >
              {cat.label}
            </button>
          ))}
        </div>
      </div>

      <div>
        <label htmlFor="sort" className="label-text">
          {t('shop.sortBy')}
        </label>
        <select
          id="sort"
          value={sortBy}
          onChange={(e) => onSortChange(e.target.value as SortOption)}
          className="input-field"
        >
          {sortOptions.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}