"use client";

import { motion, AnimatePresence } from "framer-motion";

export interface Chip {
  label: string;
  onRemove: () => void;
}

interface FilterChipsProps {
  chips: Chip[];
  onClearAll: () => void;
}

const chipVariants = {
  initial: { opacity: 0, scale: 0.8 },
  animate: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0.8 },
};

export function FilterChips({ chips, onClearAll }: FilterChipsProps) {
  if (chips.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-2">
      <AnimatePresence mode="popLayout">
        {chips.map((chip) => (
          <motion.span
            key={chip.label}
            variants={chipVariants}
            initial="initial"
            animate="animate"
            exit="exit"
            transition={{ duration: 0.15, ease: "easeOut" }}
            layout
            className="inline-flex items-center gap-1 rounded-full bg-brand-50 text-brand-700 border border-brand-200 px-2.5 py-0.5 text-xs"
          >
            {chip.label}
            <button
              type="button"
              onClick={chip.onRemove}
              className="ml-0.5 hover:text-brand-900 transition-colors"
              aria-label={`Remove filter: ${chip.label}`}
            >
              ×
            </button>
          </motion.span>
        ))}
      </AnimatePresence>
      <button
        type="button"
        onClick={onClearAll}
        className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
      >
        Clear all
      </button>
    </div>
  );
}
