next-web/src/components/InfoCard.tsx

"use client";
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Public_Sans, Schibsted_Grotesk, Source_Sans_3 } from 'next/font/google'
import classnames from 'classnames';

import { brittonRGB, textColor, bgColor } from '@/interfaces/common'

//  (san serif grotesque)(public sans, Schibsted grotesque, source sans 3)
const font = Schibsted_Grotesk({ subsets: ['latin'] })

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

const brittonColorsRBG: brittonRGB = {
    'britton-dark': '4,21,62',
    'britton-medium': '42,75,111',
    'britton-light': '106,200,241',
    'britton-electric': '_0,240,255',
    'britton-electric2': '125,249,255',
    'britton-neutral': '224,224,224',
    'britton-accent2': '176,110,48',
    'britton-accent': '211,143,74',
}

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

    const imageShadowColor: string = (cardBGColor == 'bg-britton-dark' ? "shadow-britton-accent2/90" : "shadow-black/50");
    const cardVhadowColor: string = (parentBgColor == 'bg-britton-dark' ? "shadow-britton-accent2/90" : "shadow-black/50");
    
    
    // const imageShadowColor = () => {
    //     if (cardBGColor == 'bg-britton-dark') {
    //         return 'shadow-britton-accent2/90'
    //     } else {
    //         return 'shadow-black/50'
    //     }
    // }

    // const cardVhadowColor = () => {
    //     if (parentBgColor == 'bg-britton-dark') {
    //         return 'shadow-britton-accent2/90'
    //     } else {
    //         return 'shadow-black/50'
    //     }
    // }

    // const rgbColor = ({ tailWindColor }: string) => {
    //   return brittonColorsRBG[tailWindColor];
    // };

    // const rgbColor: string = ({ name }) => {
    //   return <div>Hello, {name}</div>;
    // };

    

  return (
    <div className='flex m-h-150 justify-center py-10'>
        <div className='flex flex-col w-11/12'>
            <div className='flex flex-col w-full z-30 items-center'>
                <div className={classnames('flex rounded-2xl', 
                    {
                        "flex-row-reverse" : invert,
                        "shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert,
                        [`${cardVhadowColor}`] : !invert
                    })}>
                    <div className={classnames("flex flex-col w-7/12 z-40")}>
                        <div className={classnames(
                            'h-30 flex', parentBgColor,
                            {
                                "flex-row-reverse" : invert,
                            }
                        )}> 
                            <div className={classnames(
                                "w-29/30 text-4xl text-left pl-8 pt-10 text-britton-accent rounded-l-2xl", 
                                parentBgColor
                            )}>
                                {title}
                            </div>
                            <div className={classnames(
                                'w-1/30 relative', cardBGColor,
                                {
                                    "rounded-tr-2xl rounded-out-br-2xl" : invert,
                                    "rounded-tl-2xl rounded-out-bl-2xl" : !invert,
                                }
                                )} />
                        </div>
                        <div className={classnames(
                            "text-2xl text-left font-medium p-8 h-full", 
                            cardBGColor, bodyTextColor, font.className,
                            {
                                "rounded-l-2xl" : !invert,
                                "rounded-r-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px]" : invert,
                                [`${cardVhadowColor}`] : invert
                            }
                        )}>
                            {children}
                        </div>
                    </div>
                    <div className={classnames(
                        'w-5/12 p-4 z-40 justify-center', 
                        cardBGColor,
                        {
                            "rounded-r-2xl" : !invert,
                            "rounded-l-2xl" : invert
                        }
                    )}>
                        <div className={classnames(
                            "relative shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-xl z-40",
                            imageShadowColor
                        )}>
                            <img src={imageUrl} alt="Description" className="grayscale rounded-xl w-full h-full bg-cover bg-center" />
                            <div className="after:absolute after:inset-0 after:bg-britton-medium after:mix-blend-color after:rounded-xl" />
                        </div>
                        {/* <div style={{ backgroundImage: `url(${imageUrl})` }} className="relative w-full h-full bg-cover bg-center rounded-xl shadow shadow-britton-dark">
                            <div className="absolute inset-0 bg-britton-light/30" />
                        </div> */}
                    </div>
                </div>
            </div>
            <div className={classnames("w-2/9 relative z-45 flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px]",
                cardBGColor, cardVhadowColor,
                {
                    "ml-[calc(2/9*100%)]" : !invert,
                    "ml-[calc(5/9*100%)]" : invert
                }
                )}>
                <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="py-1 px-4 rounded text-xl text-britton-accent2 hover:text-britton-accent border-1 border-britton-accent2 hover:border-britton-accent">
                        Learn More
                </Link>
                {/* <div className={classnames(
                    "rounded-b-4xl z-40", 
                    cardBGColor,
                    {
                        "w-1/9" : !invert,
                        "w-6/9" : invert
                    }
                )}>
                    <div className={classnames('w-full h-full rounded-tr-2xl', parentBgColor)} />
                </div> */}
                {/* <div className={classnames("w-2/9 z-45 flex flex-col justify-start pb-4 text-center shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-b-3xl rounded-out-t-3xl", cardBGColor, cardVhadowColor)}>
                    <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="py-1 px-4 rounded text-xl text-britton-accent2 hover:text-britton-accent border-1 border-britton-accent2 hover:border-britton-accent">
                        Learn More
                    </Link>
                </div> */}
                {/* <div className={classnames("w-2/9 z-45 rounded-b-4xl", parentBgColor)}>
                </div>
                <div className={classnames(
                    "rounded-b-4xl", 
                    cardBGColor,
                    {
                        "w-6/9" : !invert,
                        "w-1/9" : invert,
                    }
                )}>
                    <div className={classnames(
                        'w-full h-full rounded-tl-2xl', parentBgColor)} />
                </div> */}
            </div>
        </div>
    </div>
  );
};

export default InfoCard;