'use client';

import { FilterChip } from '@/components/ui';
import { Calendar, CheckCircle, Clock } from 'lucide-react';

interface GeneralFiltersProps {
  showWithDueDate?: boolean;
  showCompletedLast7Days?: boolean;
  hideCompletedOlderThan15Days?: boolean;
  oldCompletedTasksCount?: number;
  onDueDateFilterToggle: () => void;
  onCompletedLast7DaysFilterToggle: () => void;
  onHideCompletedOlderThan15DaysFilterToggle: () => void;
}

export function GeneralFilters({
  showWithDueDate = false,
  showCompletedLast7Days = false,
  hideCompletedOlderThan15Days = false,
  oldCompletedTasksCount = 0,
  onDueDateFilterToggle,
  onCompletedLast7DaysFilterToggle,
  onHideCompletedOlderThan15DaysFilterToggle,
}: GeneralFiltersProps) {
  console.log('GeneralFilters render:', { oldCompletedTasksCount });

  return (
    <div className="space-y-2">
      <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
        Généraux
      </label>
      <div className="flex flex-wrap gap-1">
        <FilterChip
          onClick={onDueDateFilterToggle}
          variant={showWithDueDate ? 'selected' : 'default'}
          icon={<Calendar className="w-4 h-4" />}
        >
          Avec date de fin
        </FilterChip>

        <FilterChip
          onClick={onCompletedLast7DaysFilterToggle}
          variant={showCompletedLast7Days ? 'selected' : 'default'}
          icon={<CheckCircle className="w-4 h-4" />}
        >
          Complété les 7 derniers jours
        </FilterChip>

        <FilterChip
          onClick={onHideCompletedOlderThan15DaysFilterToggle}
          variant={hideCompletedOlderThan15Days ? 'selected' : 'default'}
          icon={<Clock className="w-4 h-4" />}
          count={oldCompletedTasksCount}
        >
          Masquer terminés +7j
        </FilterChip>
      </div>
    </div>
  );
}
