import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";

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

const tagVariants = cva(
  "inline-flex font-medium items-center w-fit leading-6 justify-center gap-2.5 transition-colors disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-grayscale-surface text-grayscale-textIcon-body border-1.5 border-grayscale-border hover:border-grayscale-surface-hover hover:bg-grayscale-surface-hover",
        outline:
          "bg-transparent text-grayscale-textIcon-body border-1.5 border-grayscale-border hover:border-grayscale-surface-hover",
      },
      size: {
        sm: "py-1 px-2 rounded-xl text-xs",
        md: "py-1.5 px-3 rounded-2xl text-base",
        lg: "py-2 px-4 rounded-2xl text-lg",
        icon: "h-10 w-10 rounded-2xl",
      },
      pill: {
        true: "rounded-full",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
);

export interface TagProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "variant">,
    VariantProps<typeof tagVariants> {}

const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
  ({ variant, size, pill, className, ...props }, ref) => {
    return (
      <button
        className={cn(tagVariants({ variant, size, pill }), className)}
        ref={ref}
        {...props}
      />
    );
  }
);
Tag.displayName = "Tag";

export { Tag, tagVariants };
Components
