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

type IProps = {
	typo: ITypo;
	children: React.ReactNode;
	color?: ITypoColor;
	className?: string;
	title?: string;
};
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",
	CAPTION_14_SB = "Caption_14-semibold",
}

export enum ITypoColor {
	RE_HOVER = "re-hover",
	GREY = "grey",
	BLACK = "black",
	PURPLE_FLASH = "purple-flash",
	PINK_FLASH = "pink-flash",
	GREEN_FLASH = "green-flash",
	ORANGE_FLASH = "orange-flash",
	RED_FLASH = "red-flash",
	WHITE = "white",
}

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.className ?? "",
				)}
				title={this.props.title}>
				{this.props.children}
			</div>
		);
	}
}