import React, {HTMLAttributes, HtmlHTMLAttributes, PropsWithChildren, ReactNode} from "react";
import styles from "./Text.module.scss";

interface Props<T> extends PropsWithChildren<HTMLAttributes<T>> {
    color?: string;
}

interface TextComponent {
    children?: ReactNode;
    H1: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLHeadingElement>>) => JSX.Element;
    H2: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLHeadingElement>>) => JSX.Element;
    H3: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLHeadingElement>>) => JSX.Element;
    H4: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLHeadingElement>>) => JSX.Element;
    H5: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLHeadingElement>>) => JSX.Element;
    Subtitle1: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLSpanElement>>) => JSX.Element;
    Subtitle2: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLSpanElement>>) => JSX.Element;
    Body1: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLSpanElement>>) => JSX.Element;
    Body2: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLSpanElement>>) => JSX.Element;
    Body3: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLSpanElement>>) => JSX.Element;
    Caption: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLTableCaptionElement>>) => JSX.Element;
    Error: (props: PropsWithChildren<HtmlHTMLAttributes<HTMLTableCaptionElement>>) => JSX.Element;
}

const Text: TextComponent = (props :PropsWithChildren<TextComponent>) => <span className={`${styles.body} ${styles.body1}`} {...props}>{props.children}</span>;

function H1(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h1 className={styles.title} {...props}>{props.children}</h1>);
}

function H2(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h2 className={styles.title} {...props}>{props.children}</h2>);
}

function H3(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h3 className={styles.title} {...props}>{props.children}</h3>);
}

function H4(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h4 className={styles.title} {...props}>{props.children}</h4>);
}

function H5(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h5 className={styles.title} {...props}>{props.children}</h5>);
}

function Subtitle1(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h6 className={`${styles.subTitle} ${styles.subTitle1}`} {...props}>{props.children}</h6>);
}

function Subtitle2(props: Props<HTMLHeadingElement>): JSX.Element {
    return (<h6 className={`${styles.subTitle} ${styles.subTitle2}`} {...props}>{props.children}</h6>);
}

function Body1(props: Props<HTMLSpanElement>): JSX.Element {
    return (<span className={`${styles.body} ${styles.body1}`} {...props}>{props.children}</span>);
}

function Body2(props: Props<HTMLSpanElement>): JSX.Element {
    return (<span className={`${styles.body} ${styles.body2}`} {...props}>{props.children}</span>);
}

function Body3(props: Props<HTMLSpanElement>): JSX.Element {
    return (<span className={`${styles.body} ${styles.body3}`} {...props}>{props.children}</span>);
}

function Caption(props: Props<HTMLDivElement>): JSX.Element {
    return (<div className={`${styles.caption}`} {...props}>{props.children}</div>);
}

function Error(props: Props<HTMLDivElement>): JSX.Element {
    return (<div className={`${styles.error}`} {...props}>{props.children}</div>);
}

Text.H1        = H1;
Text.H2        = H2;
Text.H3        = H3;
Text.H4        = H4;
Text.H5        = H5;
Text.Subtitle1 = Subtitle1;
Text.Subtitle2 = Subtitle2;
Text.Body1     = Body1;
Text.Body2     = Body2;
Text.Body3     = Body3;
Text.Caption   = Caption;
Text.Error     = Error;

export default Text;