import { cn } from "@/lib/utils";
import { cva } from "class-variance-authority";
import Image from "next/image";
import { twMerge } from "tailwind-merge";
import LoaderGif from "../../public/images/loaders/loader2.gif";
const Button = ({
  children,
  disabled,
  loading,
  isLoading,
  className,
  variant,
  size,
  ...rest
}: // }: ButtonHTMLAttributes<HTMLButtonElement>) => {
any) => {
  loading = isLoading !== undefined ? isLoading : loading;
  const classButton = twMerge(
    `flex justify-center w-fit items-center rounded bg-success font-medium ${
      (loading || disabled) && "opacity-80 cursor-not-allowed"
    }`,
    className,
  );
  const buttonVariants = cva(
    "items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2  disabled:opacity-50",
    {
      variants: {
        variant: {
          default: "text-primary-foreground",
          destructive:
            "bg-destructive text-destructive-foreground hover:bg-destructive/90",
          outline:
            "border border-input bg-background bg-background hover:bg-accent hover:text-accent-foreground",
          secondary:
            "bg-secondary text-secondary-foreground hover:bg-secondary/80",
          ghost: "hover:bg-accent hover:text-accent-foreground",
          link: "text-primary underline-offset-4 hover:underline",
        },
        size: {
          default: "px-4 py-2",
          sm: "h-9 rounded-md px-3",
          lg: "h-11 rounded-md px-8",
          icon: "h-10 w-10",
        },
      },
      defaultVariants: {
        variant: "default",
        size: "default",
      },
    },
  );
  return (
    // <div className="justify-center flex">
    <button
      className={twMerge(
        classButton,
        cn(buttonVariants({ variant, size, className })),
      )}
      disabled={loading || disabled}
      {...rest}
    >
      {loading ? (
        <Image width={25} height={25} src={LoaderGif} alt="Logo" />
      ) : (
        children
      )}
    </button>
    // </div>
  );
};

export default Button;