import React, { ReactNode } from "react";
import Image from "next/image";
import { StaticImport } from "next/dist/shared/lib/get-img-props";

interface ContentProps {
    title: string,
    heroImgSrc: string | StaticImport | null,
    description?: string,
    innerChildren?: ReactNode 
}

const Content = ({
    title = '',
    heroImgSrc = '',
    description = '',
    innerChildren = <></>
}: ContentProps) => {
    return (
        <div className="h-full p-4 px-10 flex flex-col">
            <div className=" w-fit pb-1 mb-8 border-b-2 border-white">{title}</div>
            {heroImgSrc && <div className="mb-8 h-full flex flex-row justify-center"><Image height={200} src={heroImgSrc} alt=""/></div>}
            <div>{description}</div>
            <div>{innerChildren}</div>
        </div>
    );
};

export default Content;