next-web/src/components/InfoCard.tsx

"use client";

import Link from 'next/link';
import Image from 'next/image';
import classnames from 'classnames';

export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
export type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";



interface InfoCardProps {
    className?: string;
    bodyTextColor: textColor;
    cardBGColor: bgColor;
    sectionBgColor: bgColor;
    title: string;
    imageUrl: string;
    learnMoreUrl?: string;
    invert?: boolean;
    children: React.ReactNode;
}

const InfoCard: React.FC<InfoCardProps> = (
    {   className,
        bodyTextColor,
        cardBGColor,
        sectionBgColor,
        title,
        imageUrl,
        learnMoreUrl,
        invert,
        children
     }
) => {

  return (
    <div className='flex flex-col items-center m-h-150 py-10'>
        <div className={classnames('w-11/12 flex', {"flex-row-reverse" : invert})}>
            <div className="flex flex-col w-7/12">
                <div className={classnames(
                    'h-30 flex rounded-t-4xl', 
                    cardBGColor,
                    {
                        "rounded-l-4xl" : !invert,
                        "rounded-r-4xl" : invert
                    }
                )}> 
                    <div className={classnames(
                        "w-7/8 text-4xl pt-10 text-britton-accent rounded-l-3xl", 
                        sectionBgColor,
                        {
                            "text-left pl-24" : !invert,
                            "text-right" : invert
                        }
                    )}>
                        {title}
                    </div>
                    <div className={classnames('w-1/8 rounded-r-3xl', sectionBgColor)} />
                </div>
                <div className={classnames(
                    "text-3xl text-left p-8 h-full", 
                    cardBGColor, bodyTextColor,
                    {
                        "rounded-l-3xl" : !invert,
                        "rounded-r-3xl" : invert
                    }
                )}>
                    {children}
                </div>
            </div>
            <div className={classnames(
                'w-5/12 p-4 justify-center', 
                cardBGColor, 
                {
                    "rounded-r-3xl rounded-tl-3xl" : !invert,
                    "rounded-l-3xl rounded-tr-3xl" : invert
                }
            )}>
                <div style={{ backgroundImage: `url(${imageUrl})` }} className="w-full h-full bg-cover bg-center rounded-3xl" />
            </div>
        </div>

        <div className='flex w-11/12 h-20'>
            <div className={classnames(
                "rounded-b-4xl", 
                cardBGColor,
                {
                    "w-1/9" : !invert,
                    "w-5/9" : invert
                }
            )}>
                <div className={classnames('w-full h-full rounded-tr-3xl', sectionBgColor)} />
            </div>
            <div className={classnames("w-3/9 rounded-b-4xl", sectionBgColor)}>
                <div className={classnames("w-full p-6 text-xl text-center text-britton-accent2 rounded-b-3xl", cardBGColor)}>
                    <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="hover:text-britton-accent">
                        Learn More
                    </Link>
                </div>
            </div>
            <div className={classnames(
                "rounded-b-4xl", 
                cardBGColor,
                {
                    "w-5/9" : !invert,
                    "w-1/9" : invert,
                }
            )}>
                <div className={classnames(
                    'w-full h-full rounded-tl-3xl', sectionBgColor)} />
            </div>
        </div>
    </div>
  );
};

export default InfoCard;