"use client";

import Link from 'next/link';
import { Schibsted_Grotesk } from 'next/font/google'
import classnames from 'classnames';


const font = Schibsted_Grotesk({ subsets: ['latin'] })

interface InfoCardProps {
    title: string;
    imageUrl: string;
    learnMoreUrl?: string;
    invert?: boolean;
    children: React.ReactNode;
}

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

    let cardBGColor;
    let imageShadowColor;

    if (invert) {
        cardBGColor = "bg-deepcove";
        imageShadowColor = "shadow-platinum/70";
      } else {
        cardBGColor = "bg-bluetang";
        imageShadowColor = "shadow-black/50";
      }

  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 items-center'>
                <div className={classnames('flex rounded-2xl shadow-copper/90',
                    {
                        "flex-row-reverse relative" : invert,
                        "shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert
                    })}>
                    <div className={classnames({
                        "hidden" : !invert,
                        "after:absolute after:bottom-0 after:right-0 after:w-full after:h-114 after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-copper/90" : invert,
                    })}/>
                    <div className={classnames("flex flex-col w-7/12")}>
                        <div className={classnames(
                            'h-30 flex',
                            {
                                "flex-row-reverse" : invert,
                            }
                        )}> 
                            <div className={classnames(
                                "relative w-full pt-8 mb-2 ml-8 mr-100 border-b-3", 
                                {
                                    "border-atmosphere" : !invert,
                                    "border-bronze" : invert
                                }
                            )}>
                                <div className={classnames(
                                    'absolute bottom-0 left-0 mb-[2px] text-5xl text-left',
                                    {
                                        "text-bronze" : !invert,
                                        "text-deepcove font-semibold" : invert
                                    }
                                )}>
                                    {title}
                                </div>
                            </div>
                        </div>
                        <div className={classnames(
                            "relative xl:text-xl 2xl:text-2xl text-left text-platinum font-medium p-8 h-full", 
                            cardBGColor, font.className,
                            {
                                "rounded-l-2xl rounded-out-rt-2xl" : !invert,
                                "rounded-r-2xl rounded-out-lt-2xl" : invert,
                            }
                        )}>
                            {children}
                        </div>
                    </div>
                    <div className={classnames(
                        'w-5/12 p-4 justify-center rounded-t-2xl', 
                        cardBGColor,
                        {
                            "rounded-r-2xl" : !invert,
                            "rounded-l-2xl" : invert,
                        }
                    )}>
                        <div className={classnames(
                            "relative shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-xl",
                            imageShadowColor
                        )}>
                            <img src={imageUrl} alt="Description" className="grayscale rounded-xl bg-cover bg-center" />
                            <div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-xl" />
                        </div>
                    </div>
                </div>
            </div>
            <div className={classnames(
                "w-2/9 relative flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px] shadow-copper/90",
                cardBGColor,
                {
                    "ml-[calc(2/9*100%)]" : !invert,
                    "ml-[calc(5/9*100%)]" : invert
                }
            )}>
                <Link href={learnMoreUrl ? learnMoreUrl : '/'} 
                    className={classnames(
                        "py-1 px-4 rounded text-xl text-semibold border-2 text-bronze hover:text-copper border-bronze hover:border-copper",
                    )}
                >
                    Learn More
                </Link>
            </div>
        </div>
    </div>
  );
};

export default InfoCard;