import styles from "./styles.module.scss";
import classNames from 'classnames'

type TitleProps = {
  title: string;
  subtitle?: string;
  align?: 'left' | 'center';
  size?: 'xl' | 'lg' | 'md' | "sm";
  fontStyle?: 'serif' | 'sans-serif'
  color?: "base" | "shade1" | "shade2" | "shade3" | "contrast" | "contrastShade1" | "white",
  cancelled?: boolean,
}

export const Title = ({title, subtitle, align = "left", size = "lg", fontStyle = "serif", color = "base", cancelled = false}: TitleProps) => {
  return (
    <>
      <h2 className={classNames({
        [styles.title]: true,
        [styles.base]: color === "base",
        [styles.shade1]: color === "shade1",
        [styles.shade2]: color === "shade2",
        [styles.shade3]: color === "shade3",
        [styles.contrast]: color === "contrast",
        [styles.contrastShade1]: color === "contrastShade1",
        [styles.white]: color === "white",
        [styles.extraLarge]: size === "xl",
        [styles.large]: size === "lg",
        [styles.medium]: size === "md",
        [styles.small]: size === "sm",
        [styles.left]: align === "left",
        [styles.center]: align === "center",
        [styles.headerFont]: fontStyle == "serif",
        [styles.cancelled]: cancelled
      })}>{title}</h2>
      {subtitle &&
        <div className={classNames({
          [styles.subtitle]: true,
          [styles.base]: color === "contrast",
          [styles.contrast]: color === "base",
          [styles.shade1]: color === "shade1",
          [styles.shade2]: color === "shade2",
          [styles.shade3]: color === "shade3",
          [styles.contrastShade1]: color === "contrastShade1",
          [styles.white]: color === "white",
          [styles.small]: ["xl", "lg"].includes(size),
          [styles.left]: align === "left",
          [styles.center]: align === "center",
          [styles.headerFont]: fontStyle == "sans-serif"
        })}>
          {subtitle}
        </div>
      }
    </>
  )
}