import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../../../@/lib/utils";

const badgeVariants = cva(
  "inline-flex items-center font-medium  transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        gray: "bg-gray-50 text-gray-700 border-gray-200",
        brand: "bg-primary-50 text-primary-700 border-primary-200",
        error: "bg-error-50 text-error-700 border-error-200",
        warning: "bg-warning-50 text-warning-700 border-warning-200",
        success: "bg-success-50 text-success-700 border-success-200",
        blue: "bg-blue-50 text-blue-700 border-blue-200",
        "gray-blue": "bg-grayBlue-50 text-grayBlue-700 border-grayBlue-200",
        "blue-light": "bg-blueLight-50 text-blueLight-700 border-blueLight-200",
        indigo: "bg-indigo-50 text-indigo-700 border-indigo-200",
        purple: "bg-purple-50 text-purple-700 border-purple-200",
        pink: "bg-pink-50 text-pink-700 border-pink-200",
        orange: "bg-orange-50 text-orange-700 border-orange-200",
      },
      type: {
        pill: "rounded-2xl",
        "pill-outlined": "border rounded-2xl",
        badge: "rounded-lg",
        "badge-outlined": "border rounded-lg",
        "icon-pill": "rounded-full",
        "icon-pill-outlined": "border rounded-full",
        "icon-badge": "rounded-lg",
        "icon-badge-outlined": "border rounded-lg",
      },
      size: {
        sm: "px-2 py-0.5 text-xs gap-1",
        md: "px-2.5 py-0.5 text-sm gap-1.5",
        lg: "px-3 py-1 text-sm gap-1.5",
        "icon-sm": "p-1.25",
        "icon-md": "p-1.5",
        "icon-lg": "p-2",
      },
    },
    defaultVariants: {
      variant: "gray",
      size: "sm",
      type: "pill-outlined",
    },
  }
);

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {
  children?: React.ReactNode;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  type?:
    | "pill"
    | "badge"
    | "pill-outlined"
    | "badge-outlined"
    | "icon-pill"
    | "icon-pill-outlined"
    | "icon-badge"
    | "icon-badge-outlined";
}

function Badge({
  className,
  variant,
  size,
  children,
  leftIcon,
  rightIcon,
  type = "pill",
  ...props
}: BadgeProps) {
  return (
    <div
      className={cn(badgeVariants({ variant, size, type }), className)}
      {...props}
    >
      {leftIcon}
      {children}
      {rightIcon}
    </div>
  );
}

export { Badge, badgeVariants };
