// ---------------------------- way 1
import { cn } from "@/lib/utils";
import { VariantProps, cva } from "class-variance-authority";
import { ButtonHTMLAttributes, ReactNode } from "react";

interface Props
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  children: ReactNode;
  className?: string;
}

const buttonVariants = cva(
  "inline-flex items-center duration-200 rounded-xl justify-center shadow-lg hover:bg-mainLime active:scale-95 hover:shadow-none",
  {
    variants: {
      intent: {
        primary: "bg-mainBlue text-white",
        outline:
          "bg-transparent border border-mainBlue text-mainBlue hover:text-white hover:border-none",
        secondary:
          "bg-mainOffWhite-100 border border-mainBlue text-mainBlue hover:text-white hover:border-none",
        loading:
          "bg-slate-500 animate-pulse transition duration-1000 ease-in-out text-white",
      },
      size: {
        xs: "px-2 h-9 text-sm",
        sm: "px-3 h-11 text-base",
        base: "px-4 h-14 text-base",
        lg: "px-6 h-16 text-xl",
      },
      fullWidth: {
        true: "w-full justify-center",
      },
    },
    defaultVariants: {
      intent: "primary",
      size: "base",
      // fullWidth: false,
    },
  }
);

const MainButton = ({
  children,
  className,
  intent,
  size,
  fullWidth,
  ...rest
}: Props) => {
  return (
    <button
      className={cn(
        buttonVariants({ intent: intent, size: size, fullWidth: fullWidth }),
        rest.disabled && "bg-slate-500 hover:bg-slate-500",
        className
      )}
      {...rest}
    >
      {children}
    </button>
  );
};

export default MainButton;

// ---------------------------- way 2
// import { cn } from "@/utils";
// import { ButtonHTMLAttributes, ReactNode } from "react";

// interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
//   children: ReactNode;
//   className?: string;
//   intent: "primary" | "outline" | "distractive";
// }

// const Button = ({ children, className, intent, ...rest }: Props) => {
//   const initClasses = cn({
//     "rounded-md font-semibold duration-200": true,
//     "bg-black text-white dark:bg-white dark:text-black": intent === "primary",
//     "bg-transparent border text-black border-black dark:border-white dark:text-white":
//       intent === "outline",
//     "bg-red-600 text-white dark:bg-red-900 dark:text-black":
//       intent === "outline",
//     // [className]: className,
//   });

//   return (
//     <button className={cn(initClasses, className)} {...rest}>
//       {children}
//     </button>
//   );
// };

// export default Button;