import { Search, X } from 'lucide-react';

import { toSignLanguageCategoryFilter } from '@/business/sign-language/selectors';
import type {
  SignLanguageCategoryOption,
  SignLanguageFilters as SignLanguageFiltersModel,
} from '@/business/sign-language/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import type { SignLanguageCategoryFilter } from '@/shared/constants/signLanguage';
import { cn } from '@/lib/utils';

interface SignLanguageFiltersProps {
  readonly filters: SignLanguageFiltersModel;
  readonly categories: readonly SignLanguageCategoryOption[];
  readonly onSearchChange: (value: string) => void;
  readonly onClearSearch: () => void;
  readonly onCategoryChange: (value: SignLanguageCategoryFilter) => void;
}

export function SignLanguageFilters({
  filters,
  categories,
  onSearchChange,
  onClearSearch,
  onCategoryChange,
}: SignLanguageFiltersProps) {
  return (
    <section className="flex flex-col md:flex-row gap-3">
      <div className="relative flex-1">
        <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
        <Input
          type="text"
          value={filters.searchQuery}
          onChange={(event) => onSearchChange(event.target.value)}
          placeholder="Search signs..."
          className="pl-10 pr-10 py-2.5 border-gray-200 rounded-xl bg-white text-gray-900 placeholder:text-gray-500 focus-visible:ring-indigo-300 focus-visible:border-indigo-400"
        />
        {filters.searchQuery && (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            onClick={onClearSearch}
            aria-label="Clear sign search"
            className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-gray-400 hover:text-gray-600"
          >
            <X size={16} />
          </Button>
        )}
      </div>
      <div className="flex gap-2 flex-wrap">
        {categories.map((category) => {
          const selected = filters.categoryFilter === category.value;

          return (
            <Button
              key={category.value}
              type="button"
              variant={selected ? 'default' : 'outline'}
              onClick={() => onCategoryChange(toSignLanguageCategoryFilter(category.value))}
              className={cn(
                'px-4 py-2 rounded-xl text-sm font-medium transition-all',
                selected
                  ? 'bg-indigo-500 text-white shadow-sm hover:bg-indigo-600'
                  : 'bg-white border-gray-200 text-gray-600 hover:bg-indigo-50',
              )}
            >
              {category.label} ({category.count})
            </Button>
          );
        })}
      </div>
    </section>
  );
}
