"use client";

import { X } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useLocale } from "@/components/providers/locale-provider";

export function FilterChips({
  chips,
  onRemove,
  onClear,
}: {
  chips: { key: string; value: string; label?: string }[];
  onRemove: (key: string) => void;
  onClear: () => void;
}) {
  const { t } = useLocale();
  if (chips.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-2">
      {chips.map((chip) => (
        <Badge
          key={chip.key}
          variant="secondary"
          className="gap-1 pr-1"
        >
          <span>
            {chip.label ?? chip.key}: {chip.value}
          </span>
          <button
            type="button"
            onClick={() => onRemove(chip.key)}
            className="rounded-full p-0.5 hover:bg-muted"
            aria-label="remove"
          >
            <X className="h-3 w-3" />
          </button>
        </Badge>
      ))}
      <Button type="button" variant="ghost" size="sm" onClick={onClear}>
        {t.clearFilters}
      </Button>
    </div>
  );
}