Badge

import { Check } from "lucide-react";

type Variant =
  | "default"
  | "primary"
  | "success"
  | "warning"
  | "danger"
  | "outlined";

interface BadgeProps {
  variant: Variant;
  icon?: boolean;
  text?: string;
}

export const Badge: React.FC<BadgeProps> = ({ variant, icon, text }) => {
  const baseClass = "px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center gap-1.5 transition-colors duration-200";
  const variantClasses = {
    default: `
      bg-gray-100/80 text-gray-600 dark:bg-gray-800/80 dark:text-gray-300
      shadow-sm shadow-gray-100/50 dark:shadow-gray-900/50
    `,
    primary: `
      bg-blue-50/80 text-blue-600 dark:bg-blue-950/80 dark:text-blue-300
      shadow-sm shadow-blue-100/50 dark:shadow-blue-900/50
    `,
    success: `
      bg-green-50/80 text-green-600 dark:bg-green-950/80 dark:text-green-300
      shadow-sm shadow-green-100/50 dark:shadow-green-900/50
    `,
    warning: `
      bg-amber-50/80 text-amber-600 dark:bg-amber-950/80 dark:text-amber-300
      shadow-sm shadow-amber-100/50 dark:shadow-amber-900/50
    `,
    danger: `
      bg-red-50/80 text-red-600 dark:bg-red-950/80 dark:text-red-300
      shadow-sm shadow-red-100/50 dark:shadow-red-900/50
    `,
    outlined: `
      border border-gray-200/80 text-gray-600 bg-white/50
      dark:border-gray-700/80 dark:text-gray-300 dark:bg-gray-900/50
      shadow-sm shadow-gray-100/50 dark:shadow-gray-900/50
    `,
  };

  const iconClasses = {
    default: "text-gray-500 dark:text-gray-400",
    primary: "text-blue-500 dark:text-blue-400",
    success: "text-green-500 dark:text-green-400",
    warning: "text-amber-500 dark:text-amber-400",
    danger: "text-red-500 dark:text-red-400",
    outlined: "text-gray-400 dark:text-gray-500",
  };

  return (
    <span
      className={`
        ${baseClass} 
        ${variantClasses[variant]}
        hover:bg-opacity-90 dark:hover:bg-opacity-90
      `}
    >
      {icon && (
        <Check
          className={`w-3.5 h-3.5 ${iconClasses[variant]}`}
          strokeWidth={2.5}
        />
      )}
      <span>{text || variant.charAt(0).toUpperCase() + variant.slice(1)}</span>
    </span>
  );
};

export const BadgeGroup: React.FC = () => (
  <div className="flex flex-wrap items-center gap-3 p-4">
    <Badge variant="primary" text="Primary" />
    <Badge variant="success" text="Success" />
    <Badge variant="warning" text="Warning" />
    <Badge variant="danger" text="Danger" />
    <Badge variant="outlined" text="Outlined" />
    <Badge variant="success" icon text="With Icon" />
  </div>
);