import React, { ReactNode, forwardRef } from "react";
import ButtonBG from "./SVGs/ButtonBG";
import {MotionStyle, motion} from "framer-motion"
import { useRouter } from "next/router";
const Button = forwardRef(function Button({
  size = 12,
  children,
  style = {},
  disabled = false,
  onClick = () => null,
}: {
  size?: number;
  disabled?: boolean;
  style?: MotionStyle;
  children?: ReactNode | string;
  onClick?: Function;
}, ref:React.Ref<HTMLButtonElement>) {
  const router = useRouter()
  return (
    <motion.button
    ref={ref}
    className="disabled:cursor-not-allowed"
    disabled={disabled}
    whileHover={{
        scale: disabled ? 1 : 1.05,
    }}
    onClick={async() => {
    if(disabled) return  
    await onClick()
  }}
    transition={{
        duration: 0.3,
        
    }}
      style={{
        width: `${size}rem`,
        height: `${size / 3.44776119403}rem`,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        filter: `brightness(${disabled ? "0.8" : "1"})`,
        ...style
      }}
    >
      <ButtonBG size={size} />
      <div
        style={{
          fontSize: `${size / 8}rem`,
          fontFamily: "Luckiest Guy",
          color: "#fff",
          position: "relative",
          WebkitTextStroke: '1px black', // Add a black outline/stroke for WebKit browsers (Safari, Chrome)
      
        }}
      >
        {children}
      </div>
    </motion.button>
  );
});

export default Button;