import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "../lib/utils";

const badgeVariants = cva(
  "tw-figr-inline-flex tw-figr-font-secondary tw-figr-items-center tw-figr-rounded-full tw-figr-border tw-figr-px-sm tw-figr-py-xxs tw-figr-text-desktop-caption-accent tw-figr-transition-colors",
  {
    variants: {
      variant: {
        default:
          "tw-figr-border-transparent tw-figr-bg-primary tw-figr-text-base-white tw-figr-shadow hover:tw-figr-bg-primary-600",
        secondary:
          "tw-figr-border-transparent tw-figr-bg-secondary tw-figr-text-base-black hover:tw-figr-bg-secondary-200",
        destructive:
          "tw-figr-border-transparent tw-figr-bg-error-100 tw-figr-text-base-white tw-figr-shadow hover:tw-figr-bg-error-200",
        outline:
          "tw-figr-text-base-black tw-figr-border tw-figr-border-neutral-200 hover:tw-figr-bg-neutral-100"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  );
}

export { Badge, badgeVariants };