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

const tag = cva(["fl-py-2 fl-px-3", "fl-rounded-md", "fl-text-sm"], {
  variants: {
    intent: {
      primary: ["fl-bg-primary", "fl-text-white"],
      secondary: ["fl-bg-secondary", "fl-text-white"],
      ghost: ["fl-bg-transparent", "fl-text-dark"],
      dark: ["fl-bg-dark", "fl-text-white"],
      danger: ["fl-bg-danger", "fl-text-white"],
      success: ["fl-bg-success", "fl-text-dark"],
    },
  },
  defaultVariants: {
    intent: "primary",
  },
});

export interface TagProps
  extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
    VariantProps<typeof tag> {}
{
}

const Button: React.FC<TagProps> = ({ className, intent, ...props }) => (
  <span className={tag({ intent, className })} {...props} />
);

export default Button;