"use client";

import { FC } from "react";
import Link from "next/link";
import { Button as MUIButton } from "@mui/material";
import { colors } from "../styles/theme";

interface InternalButtonProps {
  text: string;
  color?: string;
  kind?: "primary" | "secondary" | "destructive";
  type?: string;
  onClick?: any;
}

const buttonColors = {
  primary: colors.mediumBlue,
  secondary: colors.darkMediumGray,
  destructive: colors.brightRed,
};

const buttonHighlightColors = {
  primary: colors.darkBlue,
  secondary: colors.highlightGray,
  destructive: colors.mediumRed,
};

export const InternalButton: FC<InternalButtonProps> = ({
  text,
  color,
  kind,
  type = "button",
  onClick,
}) => (
  <MUIButton
    variant="contained"
    disableElevation
    onClick={onClick}
    type={type}
    href=""
    sx={{
      fontFamily: "Poppins, sans-serif",
      fontWeight: 700,
      borderRadius: 2,
      backgroundColor: color ?? buttonColors[kind ?? "secondary"],
      padding: "6px 30px",
      margin: 0,
      whiteSpace: "nowrap",
      textTransform: "none",
      "&:hover": {
        backgroundColor: buttonHighlightColors[kind ?? "secondary"],
      },
    }}
  >
    {text}
  </MUIButton>
);

interface ButtonProps {
  text: string;
  color?: string;
  kind?: "primary" | "secondary" | "destructive";
  type?: string;
  href?: string;
  onClick?: any;
}

export const Button: FC<ButtonProps> = ({
  text,
  color,
  type,
  kind,
  href,
  onClick,
}) =>
  href ? (
    <Link href={href} passHref>
      <InternalButton
        text={text}
        color={color}
        kind={kind}
        type={type}
        onClick={onClick}
      />
    </Link>
  ) : (
    <InternalButton
      text={text}
      color={color}
      kind={kind}
      type={type}
      onClick={onClick}
    />
  );