"use client";

type StatusFilter = "all" | "active" | "deprecated" | "quarantined"; // quarantined = blocked in UI

interface SourcesFiltersProps {
  statusFilter: StatusFilter;
  onStatusFilterChange: (filter: StatusFilter) => void;
  totalCount: number;
  filteredCount: number;
}

export function SourcesFilters({
  statusFilter,
  onStatusFilterChange,
  totalCount,
  filteredCount,
}: SourcesFiltersProps) {
  const options: { value: StatusFilter; label: string }[] = [
    { value: "all", label: "All Statuses" },
    { value: "active", label: "Active" },
    { value: "deprecated", label: "Deprecated" },
    { value: "quarantined", label: "Blocked" },
  ];

  return (
    <div className="flex items-center gap-4">
      <select
        value={statusFilter}
        onChange={(e) => onStatusFilterChange(e.target.value as StatusFilter)}
        className="h-9 rounded-md border border-border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
      <span className="text-sm text-muted-foreground">
        Showing {filteredCount} of {totalCount} source
        {totalCount !== 1 ? "s" : ""}
      </span>
    </div>
  );
}

export type { StatusFilter };
