Button

import styled from "styled-components";
import { Theme, useTheme } from "@styling/theme";

export type ButtonProps = {
  children: React.ReactNode;
  type: "solid" | "outline" | "outline-basic";
  size: "small" | "medium" | "large";
  linkTo: string;
  onClick: (linkTo: string) => void;
};
export const Button = ({
  children,
  linkTo,
  type,
  size,
  onClick,
}: ButtonProps) => {
  const theme = useTheme();

  const handleButtonClick = (): void => {
    onClick(linkTo);
  };

  return (
    <StyledButton
      $theme={theme}
      $type={type}
      $size={size}
      onClick={handleButtonClick}
    >
      {children}
    </StyledButton>
  );
};

type ButtonColors = {
  color: string;
  background: string;
  border: string;
};

const getButtonColors = (
  theme: Theme,
  type: ButtonProps["type"]
): ButtonColors =>
  ({
    solid: {
      background: theme.palette.primary.main,
      color: theme.palette.primary.contrast,
      border: theme.palette.primary.main,
    },
    outline: {
      background: "transparent",
      color: theme.palette.primary.main,
      border: theme.palette.primary.main,
    },
    "outline-basic": {
      background: "transparent",
      color: theme.palette.basic.main,
      border: theme.palette.basic.main,
    },
  }[type]);

const mappedButtonSize: Record<ButtonProps["size"], string> = {
  small: "40px",
  medium: "48px",
  large: "58px",
};

const getButtonFontSize = (theme: Theme, buttonSize: ButtonProps["size"]) =>
  ({
    small: theme.typography.fontSize(16),
    medium: theme.typography.fontSize(16),
    large: theme.typography.fontSize(22),
  }[buttonSize]);

const StyledButton = styled("button")(
  ({
    $theme,
    $type = "solid",
    $size = "medium",
  }: {
    $theme: Theme;
    $type: ButtonProps["type"];
    $size: ButtonProps["size"];
  }) => {
    const { border, background, color } = getButtonColors($theme, $type);
    return {
      color,
      background,
      height: mappedButtonSize[$size],
      border: `2px solid ${border}`,
      padding: "0 50px",
      borderRadius: "30px",
      minWidth: "200px",
      fontWeight: "bold",
      fontSize: getButtonFontSize($theme, $size),
      "&:hover": {
        cursor: "pointer",
      },
    };
  }
);