import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"
import OptimizedImage from "../global/optimized-image";

export interface CardData {
    title: string;
    description: string | React.ReactNode;
    image: {
        src: string;
        alt: string;
    };
    details: {
        title: string;
        content: string;
    };
    reverse?: boolean;
};

export default function Card({ cardData, onImageClick }: { cardData: CardData, onImageClick?: () => void }) {
    return (
        <article className="w-full flex justify-center p-10">
            <div className="w-[1400px] flex-row">
                <div className="flex-row sm:flex">
                    <div className={`${cardData.reverse ? "order-2" : "order-1"} relative`}>
                        <OptimizedImage
                            src={cardData.image.src}
                            alt={cardData.image.alt}
                            containerClassName="
                            xl:w-[700px] xl:h-[596px]
                            lg:w-[580px] lg:h-[494px]
                            md:w-[480px] md:h-[408px]
                            sm:w-[360px] sm:h-[306px]
                            w-[360px] h-[306px]"
                            className="rounded-2xl object-cover w-full h-full cursor-pointer hover:scale-105 transition-transform duration-300 shadow-xl"
                            onClick={onImageClick}
                        />
                        <hr className={`border-2 border-secondary rounded-lg mt-4 w-40 flex absolute ${cardData.reverse ? "right-0" : ""}`} />
                    </div>
                    <div className={`${cardData.reverse ? "order-1 sm:mr-4" : "order-2 sm:ml-4"} mt-8 sm:mt-0  w-full`}>
                        <h1 className="text-3xl md:text-5xl font-bold uppercase">{cardData.title}</h1>
                        <div className="text-sm lg:text-lg mt-2 md:mt-8">{cardData.description}</div>
                        <div className="hidden md:flex">
                            {/* <Details cardData={cardData} /> */}
                        </div>
                    </div>
                </div>
                <div className="md:hidden sm:pt-8">
                    {/* <Details cardData={cardData} /> */}
                </div>
            </div>
        </article>
    );
}

export function Details({ cardData }: { cardData: CardData }) {
    return (
        <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="item-1">
                <AccordionTrigger>{cardData.details.title}</AccordionTrigger>
                <AccordionContent>
                    {cardData.details.content}
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    )
}
