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

import { toPolicyCategoryFilter } from '@/business/policies/selectors';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import type { PoliciesViewProps } from '@/components/policies/types';

export function PoliciesFilters({ state, actions }: PoliciesViewProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-4 space-y-3">
      <div className="relative">
        <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
        <Input
          type="text"
          value={state.searchQuery}
          onChange={(event) => actions.setSearchQuery(event.target.value)}
          placeholder="Search policies by title or content..."
          className="w-full pl-10 pr-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-400 focus:ring-2 focus:ring-violet-500 outline-none"
        />
        {state.searchQuery && (
          <Button
            type="button"
            onClick={actions.clearSearch}
            variant="ghost"
            size="icon"
            className="absolute right-3 top-1/2 -translate-y-1/2 h-auto w-auto p-0 text-slate-400 hover:text-white hover:bg-transparent"
            aria-label="Clear policy search"
          >
            <X size={16} />
          </Button>
        )}
      </div>
      <div className="flex flex-wrap gap-2">
        {state.categories.map((category) => (
          <Button
            key={category}
            type="button"
            onClick={() => actions.setCategoryFilter(toPolicyCategoryFilter(category))}
            className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all border ${
              state.categoryFilter === category
                ? 'bg-violet-500/20 text-violet-300 border-violet-500/30'
                : 'bg-slate-700/30 text-slate-400 border-slate-600/30 hover:bg-slate-700/50'
            }`}
          >
            {category === 'all' ? 'All Categories' : category}
          </Button>
        ))}
      </div>
    </div>
  );
}
