import NextLink from "next/link";

import Button from "@mui/material/Button";
import type { ButtonHTMLAttributes } from "react";
import type { ReactNode } from "react";

type AuthPrimaryButtonProps = {
  children: ReactNode;
  disabled?: boolean;
  href?: string;
  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
};

export function AuthPrimaryButton({
  children,
  disabled = false,
  href,
  type = "button",
}: AuthPrimaryButtonProps) {
  return (
    <Button
      component={href ? NextLink : "button"}
      disabled={disabled}
      fullWidth
      href={href}
      type={href ? undefined : type}
      variant="contained"
      sx={{
        height: 53,
        borderRadius: "12px",
        backgroundColor: "#144167",
        fontSize: 13,
        fontWeight: 500,
        lineHeight: 1,
        boxShadow: "none",
        "&:hover": {
          backgroundColor: "#103757",
          boxShadow: "none",
        },
        "&.Mui-disabled": {
          backgroundColor: "#7B828D",
          color: "#ffffff",
        },
      }}
    >
      {children}
    </Button>
  );
}