import { Button, ButtonProps } from "@material-tailwind/react";

export type ButtonCustomProps = ButtonProps & {
  icon: any;
  iconPosition?: "left" | "right";
  size?: "sm" | "md" | "lg";
  resetClass?: boolean;
  fullWidth?: boolean;
};

export default function ButtonCustom({
  icon,
  iconPosition,
  resetClass,
  disabled,
  size = "md",
  fullWidth,
  ...props
}: ButtonCustomProps) {
  const sizeClasses = {
    // sm: 'px-4 py-2',
    // md: 'px-8 py-3',
    // lg: 'px-14 py-2.5',
  };

  return (
    <>
      <Button
        {...props}
        color="purple"
        className={
          resetClass
            ? props.className
            : `${sizeClasses[size]} ${props.className} flex items-center justify-center gap-2 font-medium
                        px-5 py-3 md:px-8 md:py-2.5 lg:px-9 lg:py-3
                        hover:opacity-100
                        text-sm md:text-base rounded-xl capitalize shadow-none outline-none ${!props.variant ? "primary-button" : ""}`
        }
        disabled={disabled ?? false}
        fullWidth={fullWidth}
      >
        {iconPosition == "left" || (!iconPosition && icon)}
        {props.children}
        {iconPosition == "right" && icon}
      </Button>
    </>
  );
}
