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

export interface ImageTextProps {
    odd?: boolean;
    heading: HeadingProps;
    html?: string;
    description?: string;
    button?: ReactNode;
    image?: ReactNode;
    // ClassNames.
    className?: string;
    classNameText?: string;
    classNameImage?: string;
    classNameProse?: string;
    classNameTitle?: string;
    classNameSubtitle?: string;
    classNameHeading?: string;
}

const ImageText = ({
    className,
    classNameText,
    classNameImage,
    classNameProse,
    odd = false,
    heading,
    description,
    html,
    button,
    image
}: ImageTextProps) => {
    return (
        <article className={className}>
            <Row>
                <div
                    className={classNamesTailwind(
                        'order-2 col-span-4 md:col-span-12 flex flex-col items-start lg:col-span-6 pt-12 sm:pt-16 lg:pt-0',
                        {
                            'lg:order-1': odd,
                            'lg:order-2 lg:col-start-7': !odd
                        },
                        classNameText
                    )}
                >
                    <Heading
                        {...heading}
                        classNameTitle={classNamesTailwind('mb-6 md:mb-8', heading.classNameTitle)}
                        classNameSubtitle={classNamesTailwind('mb-6 md:mb-8', heading.classNameSubtitle)}
                    />
                    <Prose className={classNameProse} html={html} text={description} />
                    {button}
                </div>
                <div
                    className={classNamesTailwind(
                        'rounded relative overflow-hidden flex order-1 col-span-4 md:col-span-12 mb-8 h-auto w-full lg:col-span-5 lg:mb-0',
                        {
                            'lg:order-2 lg:col-start-8': odd,
                            'lg:order-1': !odd
                        },
                        classNameImage
                    )}
                >
                    {image}
                </div>
            </Row>
        </article>
    );
};

export default ImageText;
