Filter Chips

"use client";

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

export interface FilterChip {
  id: string;
  field: string;
  value: string;
}

export interface FilterChipsProps {
  filters?: FilterChip[];
  defaultFilters?: FilterChip[];
  onFiltersChange?: (filters: FilterChip[]) => void;
  className?: string;
}

const DEFAULTS: FilterChip[] = [
  { id: "status", field: "Status", value: "Overdue" },
  { id: "entity", field: "Entity", value: "Ledgerly GmbH" },
  { id: "amount", field: "Amount", value: "> $5,000" },
  { id: "due", field: "Due", value: "Last 30 days" },
];

/** Active-filter bar: “field: value” chips with a remove (×) button each, a result-count region and “Clear all”; announces removals. */
export function FilterChips({ filters, defaultFilters = DEFAULTS, onFiltersChange, className }: FilterChipsProps) {
  const [inner, setInner] = useState(defaultFilters);
  const list = filters ?? inner;
  const [msg, setMsg] = useState("");
  const update = (next: FilterChip[], m: string) => {
    setInner(next);
    onFiltersChange?.(next);
    setMsg(m);
  };
  return (
    <div className={cn("flex flex-wrap items-center gap-2", className)}>
      <span className="text-xs font-semibold tracking-da-label text-da-muted-fg uppercase">Filters</span>
      <ul className="contents">
        {list.map((f) => (
          <li
            key={f.id}
            className="da-stroke inline-flex items-center rounded-da-md bg-da-surface text-sm text-da-surface-fg transition-opacity duration-(--da-duration) starting:opacity-0"
          >
            <span className="py-1 pl-2.5">
              <span className="text-da-muted-fg">{f.field}:</span> <span className="font-semibold">{f.value}</span>
            </span>
            <button
              type="button"
              aria-label={`Remove filter ${f.field}: ${f.value}`}
              onClick={() =>
                update(
                  list.filter((x) => x.id !== f.id),
                  `Removed ${f.field} filter`,
                )
              }
              className="da-focus ml-1 grid size-7 place-items-center rounded-r-da-md text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg"
            >
              <X aria-hidden className="size-3.5" />
            </button>
          </li>
        ))}
      </ul>
      {list.length > 0 ? (
        <button
          type="button"
          onClick={() => update([], "All filters cleared")}
          className="da-focus rounded-da-sm px-1 text-sm font-semibold text-da-primary hover:underline"
        >
          Clear all
        </button>
      ) : (
        <span className="text-sm text-da-muted-fg">No filters applied</span>
      )}
      <span role="status" className="sr-only">
        {msg}
      </span>
    </div>
  );
}

export default FilterChips;