import React from "react";
import { vcn, VariantProps } from "../shared";

const [buttonVariants, resolveVariants] = vcn({
  base: "flex flex-row items-center justify-between rounded-md",
  variants: {
    variant: {
      default:
        "bg-white border border-gray-300 dark:bg-black dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
      ghost:
        "bg-black/0 hover:bg-black/10 dark:bg-white/0 dark:hover:bg-white/20 transition-colors",
      outline:
        "bg-transparent border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
      link: "bg-transparent hover:underline transition-colors",
    },
    size: {
      sm: "px-2 py-1 text-sm",
      md: "px-4 py-2 text-base",
      lg: "px-5 py-3 text-lg",
    },
  },
  defaults: {
    variant: "default",
    size: "md",
  },
});

export interface ButtonProps
  extends Omit<React.ComponentPropsWithoutRef<"button">, "className">,
    VariantProps<typeof buttonVariants> {}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => {
    const [variantProps, otherProps] = resolveVariants(props);
    return (
      <button
        ref={ref}
        {...otherProps}
        className={buttonVariants(variantProps)}
      />
    );
  }
);

export { Button };