// Plaaayground v2 — FilterChips
// Blueprint: 05 — Removable filter badges with animation

import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
import { spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

export interface FilterChip {
  id: string;
  label: string;
  color?: string;
}

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

export function FilterChips({ filters, onRemove, className }: FilterChipsProps) {
  return (
    <div className={cn("flex flex-wrap items-center gap-1.5", className)}>
      <AnimatePresence>
        {filters.map((filter) => (
          <motion.span
            key={filter.id}
            layout
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.8, opacity: 0 }}
            transition={spring.snappy}
            className="inline-flex items-center gap-2 rounded-full bg-secondary px-2.5 py-0.5 text-sm text-secondary-foreground"
          >
            {filter.color && (
              <span
                className="w-1.5 h-1.5 rounded-full flex-shrink-0"
                style={{ backgroundColor: filter.color }}
              />
            )}
            <span className="font-mono uppercase tracking-wide">{filter.label}</span>
            <button
              onClick={() => onRemove(filter.id)}
              className="ml-0.5 rounded-full p-0.5 hover:bg-foreground/10 transition-colors"
              aria-label={`Remove ${filter.label} filter`}
            >
              <X className="w-3 h-3" />
            </button>
          </motion.span>
        ))}
      </AnimatePresence>
    </div>
  );
}
FilterChips

Preview
