"use client";

import { X } from "lucide-react";
import { cn } from "@/lib/utils";

type FilterChipProps = {
  label: string;
  onRemove: () => void;
  className?: string;
};

export function FilterChip({ label, onRemove, className }: FilterChipProps) {
  return (
    <span className={cn("filter-chip", className)}>
      <span className="truncate">{label}</span>
      <button
        type="button"
        onClick={onRemove}
        className="remove"
        aria-label={`Remove ${label} filter`}
      >
        <X className="size-3" />
      </button>
    </span>
  );
}