// 
"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "@radix-ui/react-slot";
import { cn } from "@/lib/utils";

const customButtonVariants = cva(
  "inline-flex items-center justify-center text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none uppercase font-jengle",
  {
    variants: {
      variant: {
        neumorphic:
          "rounded-full gap-[11px] px-[32px] py-[24px] bg-white hover:bg-[#272666] hover:text-white duration-300",
        darkshadow:
          "rounded-full gap-[11px] px-[32px] py-[24px] bg-[#272666] text-white border border-[rgba(116,116,232,0.4)] hover:bg-white hover:text-[#272666] duration-300",
      },
      size: {
        default: "h-10 px-4 py-2",
        lg: "h-14 px-8 py-6",
      },
    },
    defaultVariants: {
      variant: "neumorphic",
      size: "default",
    },
  }
);

export interface CustomButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof customButtonVariants> {
  asChild?: boolean;
}

const CustomButton = React.forwardRef<
  HTMLButtonElement,
  CustomButtonProps
>(({ className, variant, size, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button";

  const shadowStyle =
    variant === "neumorphic"
      ? {
          boxShadow:
            "-3px -3px 10px rgba(116,116,232,0.5) inset, 7px 7px 10px rgba(116,116,232,0.5) inset, 12px 12px 25px #38274A",
        }
      : variant === "darkshadow"
      ? {
          boxShadow:
            "12px 12px 25px #38274A, -3px -3px 10px rgba(116,116,232,0.5) inset, 7px 7px 10px rgba(116,116,232,0.5) inset",
        }
      : {};

  return (
    <Comp
      ref={ref}
      className={cn(customButtonVariants({ variant, size }), className)}
      style={shadowStyle}
      {...props}
    />
  );
});

CustomButton.displayName = "CustomButton";

export { CustomButton };