import Link from "next/link";
import { cn } from "clsx-tailwind-merge";
import { Fragment } from "react";

type ButtonType = "primary" | "outlined";

type ButtonProps = {
  href?: string;
  text?: string;
  onClick?: () => void;
  children?: React.ReactNode;
  type?: ButtonType;
  className?: string;
  disabled?: boolean;
  submit?: boolean;
};

const styles = {
  default: "h-10 transition-colors duration-300 ease-in-out flex justify-center items-center font-bold rounded-[3rem]",
  primary: "bg-light-blue text-white hover:bg-dark-blue",
  outlined: "border border-light-blue",
};

const Button = ({ href, text, onClick, children, type = "primary", className, disabled, submit }: ButtonProps) => {
  return (
    <Fragment>
      {href ? (
        <Link
          href={href}
          className={cn(styles.default, styles[type as ButtonType], className, {
            "opacity-50 pointer-events-none": disabled,
          })}
          scroll={false}
        >
          <span className="leading-none -mt-[0.1875rem]">{text}</span>
        </Link>
      ) : (
        <button
          onClick={onClick}
          className={cn(styles.default, styles[type as ButtonType], className, {
            "opacity-50 pointer-events-none": disabled,
          })}
          disabled={disabled}
        >
          {children}
          <span className="leading-none -mt-[0.1875rem]">{disabled && !submit ? "No disponible" : text}</span>
        </button>
      )}
    </Fragment>
  );
};

export default Button;