"use client";

import { reasonLabels, type QuarantineReason } from "./constants";

interface QuarantineFiltersProps {
  selectedReason: string | null;
  onReasonChange: (reason: string | null) => void;
  availableReasons: string[];
}

export function QuarantineFilters({
  selectedReason,
  onReasonChange,
  availableReasons,
}: QuarantineFiltersProps) {
  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-2">
        <label
          htmlFor="reason-filter"
          className="text-sm text-muted-foreground"
        >
          Filter by reason:
        </label>
        <select
          id="reason-filter"
          value={selectedReason ?? ""}
          onChange={(e) => onReasonChange(e.target.value || null)}
          className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none"
        >
          <option value="">All reasons</option>
          {availableReasons.map((reason) => {
            const normalized = reason.toLowerCase().replace(/-/g, "_") as QuarantineReason;
            const label = reasonLabels[normalized] ?? reason;
            return (
              <option key={reason} value={reason}>
                {label}
              </option>
            );
          })}
        </select>
      </div>
      {selectedReason && (
        <button
          onClick={() => onReasonChange(null)}
          className="text-xs text-primary hover:underline"
        >
          Clear filter
        </button>
      )}
    </div>
  );
}
