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

interface ContentCarouselProps {
    data: Array<{
        title: String,
        heroImgSrc: string | StaticImport,
        description?: string,
        prototypeIframeURL?: string
    }>
}

const ContentCarousel = ({
    data = []
}: ContentCarouselProps) => {
    const [pageLength, setPageLength] = useState(data.length)
    const [currentPageIdx, setCurrentPageIdx] = useState(0);

    const portfolioData = data[currentPageIdx];
    return (
        <div>
            <div className="p-4 px-10 flex flex-col">
                <div className=" w-fit pb-1 mb-8 border-b-2 border-white">{portfolioData.title}</div>
                {portfolioData.heroImgSrc && <div className="mb-8"><Image src={portfolioData.heroImgSrc} alt=""/></div>}
                <div>{portfolioData.description}</div>
                <div>{<iframe src={portfolioData.prototypeIframeURL} width="100%" height="100%" frameBorder= "0"></iframe>}</div>
            </div>
        </div>
        
    );
};

export default ContentCarousel;