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

export interface TeaserProps {
    as?: ElementType;
    image?: ReactNode;
    className?: string;
    classNameImage?: string;
    classNameDescription?: string;
    heading: HeadingProps;
    description: string;
    button?: ReactNode;
}

const Teaser = ({ as: Tag = 'li', image, classNameImage, className, heading, description, classNameDescription, button }: TeaserProps) => {
    return (
        <Tag className={classNamesTailwind('flex flex-col', className)}>
            {image && <div className={classNamesTailwind('rounded relative overflow-hidden  mb-6 md:mb-8', classNameImage)}>{image}</div>}
            <Heading {...heading} />
            <p className={classNameDescription}>{description}</p>
            {button}
        </Tag>
    );
};

export default Teaser;
