import { useTranslation } from "react-i18next";
import { X } from "lucide-react";
import type { ActiveFilter } from "../lib/useActiveFilters";

// The applied-filter row above the feed: every narrowing currently in force, each removable on its
// own. It exists because the filter panel now sits collapsed as a tab — without this you'd have to
// open the panel just to see what you'd filtered by.
export default function ActiveFilterChips({
  filters,
  onClearAll,
}: {
  filters: ActiveFilter[];
  onClearAll: () => void;
}) {
  const { t } = useTranslation();
  if (filters.length === 0) return null;

  return (
    <div
      data-testid="active-filter-chips"
      className="flex flex-wrap items-center gap-1.5 pb-3"
      aria-label={t("feed.chips.label")}
    >
      <span className="text-[11px] uppercase tracking-wider text-muted mr-0.5">
        {t("feed.chips.label")}
      </span>
      {filters.map((f) => (
        <button
          key={f.key}
          data-testid="active-filter-chip"
          data-filter-key={f.key}
          onClick={f.remove}
          title={t("feed.chips.remove", { name: f.label })}
          aria-label={t("feed.chips.remove", { name: f.label })}
          className="group inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-full border border-accent/40 bg-accent/10 text-accent text-xs hover:border-accent hover:bg-accent/20 transition"
        >
          <span className="max-w-[14rem] truncate">{f.label}</span>
          <X className="w-3 h-3 shrink-0 opacity-60 group-hover:opacity-100" />
        </button>
      ))}
      {filters.length > 1 && (
        <button
          data-testid="active-filter-clear-all"
          onClick={onClearAll}
          className="ml-0.5 text-xs text-muted hover:text-fg underline underline-offset-2 transition"
        >
          {t("sidebar.clearAll")}
        </button>
      )}
    </div>
  );
}
