import React from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";

type IProps = {
  typo: ITypo;
  children: React.ReactNode;
  color?: ITypoColor;
};
type IState = {};

export enum ITypo {
  H1 = "H1-60",
  H1Bis = "H1-bis-40",
  H2 = "H2-30",
  H3 = "H3-24",

  P_SB_18 = "Paragraphe-semibold-18",
  P_18 = "Paragraphe-simple-18",
  P_MAJ_18 = "Paragraphe-MAJ-18",
  NAV_HEADER_18 = "Nav-header-off-18",
  P_ERR_18 = "Paragraphe-18-error",

  P_SB_16 = "Paragraphe-semibold-16",
  P_16 = "Paragraphe-simple-16",
  NAV_INPUT_16 = "Nav-input-off-16",
  P_ERR_16 = "Paragraphe-16-error",

  CAPTION_14 = "Caption_14",
}

export enum ITypoColor {
  RE_HOVER = "re-hover",
  GREY = "grey"
}

export default class Typography extends React.Component<IProps, IState> {
  public override render(): JSX.Element {
    return (
      <div
        className={classNames(
          classes["root"],
          classes[this.props.typo],
          classes[this.props.color ?? ""]
        )}
      >
        {this.props.children}
      </div>
    );
  }
}