'use client';

import { TaskStatus, Task } from '@/lib/types';
import { getAllStatuses } from '@/lib/status-config';
import { FilterChip } from '@/components/ui';
import { Eye, EyeOff } from 'lucide-react';

interface ColumnFiltersProps {
  hiddenStatuses: Set<TaskStatus>;
  onToggleStatus: (status: TaskStatus) => void;
  tasks: Task[];
}

export function ColumnFilters({
  hiddenStatuses,
  onToggleStatus,
  tasks,
}: ColumnFiltersProps) {
  return (
    <div className="space-y-2">
      <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
        Colonnes
      </label>
      <div className="flex flex-wrap gap-1">
        {getAllStatuses().map((statusConfig) => {
          const statusCount = tasks.filter(
            (task) => task.status === statusConfig.key
          ).length;
          return (
            <FilterChip
              key={statusConfig.key}
              onClick={() => onToggleStatus(statusConfig.key)}
              variant={
                hiddenStatuses.has(statusConfig.key) ? 'hidden' : 'default'
              }
              count={statusCount}
              icon={
                hiddenStatuses.has(statusConfig.key) ? (
                  <EyeOff size={16} />
                ) : (
                  <Eye size={16} />
                )
              }
              title={
                hiddenStatuses.has(statusConfig.key)
                  ? `Afficher ${statusConfig.label}`
                  : `Masquer ${statusConfig.label}`
              }
            >
              {statusConfig.label}
            </FilterChip>
          );
        })}
      </div>
    </div>
  );
}
