import Row from '../Row';
import React, { ElementType, ReactNode } from 'react';
import Prose from '../Prose';
import { classNamesTailwind } from '../../utils/theme';
import Heading from '../Heading';
import Container from '../Container';

export interface TextProps {
    title?: string;
    titleHtml?: string;
    titleAs?: ElementType | null;
    subtitle?: string | null;
    subtitleAs?: ElementType | null;
    html?: string;
    text?: string;
    button?: ReactNode;
    // ClassNames.
    className?: string;
    classNameRow?: string;
    classNameContainer?: string;
    classNameProse?: string;
    classNameTitle?: string;
    classNameSubtitle?: string;
    classNameHeading?: string;
}

const Text = ({
    className,
    classNameRow,
    classNameProse,
    classNameTitle,
    classNameSubtitle,
    classNameHeading,
    classNameContainer,
    title,
    titleHtml,
    titleAs = 'h3',
    subtitle,
    text,
    html,
    button
}: TextProps) => {
    return (
        <Container className={classNameContainer}>
            <Row className={classNameRow}>
                <div className={classNamesTailwind('col-span-12 md:col-span-9 md:col-start-2 lg:col-span-8 lg:col-start-3', className)}>
                    <Heading
                        titleAs={titleAs}
                        title={title}
                        subtitle={subtitle}
                        titleHtml={titleHtml}
                        className={classNameHeading}
                        classNameTitle={classNameTitle}
                        classNameSubtitle={classNameSubtitle}
                    />
                    <Prose className={classNameProse} html={html} text={text} />
                    {button}
                </div>
            </Row>
        </Container>
    );
};

export default Text;
