Badge Dismissible

import { useState } from "react";

interface BadgeDismissibleProps {
  label: string;
  variant?: "gray" | "blue" | "green" | "red" | "purple";
  onDismiss?: () => void;
}

const variantStyles: Record<string, string> = {
  gray: "bg-gray-100 text-gray-700 border-gray-200",
  blue: "bg-blue-50 text-blue-700 border-blue-200",
  green: "bg-emerald-50 text-emerald-700 border-emerald-200",
  red: "bg-red-50 text-red-700 border-red-200",
  purple: "bg-purple-50 text-purple-700 border-purple-200",
};

export function BadgeDismissible({ label, variant = "gray", onDismiss }: BadgeDismissibleProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  const dismiss = () => {
    setVisible(false);
    onDismiss?.();
  };

  return (
    <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold border transition-opacity duration-300 ${variantStyles[variant]}`}>
      {label}
      <button onClick={dismiss} className="shrink-0 rounded-full hover:bg-black/5 p-0.5 transition-colors" aria-label={`Remove ${label}`}>
        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
  );
}