import React, { useState } from "react";
import Image from "next/image";
import { StaticImport } from "next/dist/shared/lib/get-img-props";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronCircleLeft, faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
import IframeResizer from "iframe-resizer-react";
import Link from "next/link";

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 className="flex flex-row justify-between">
            <div style={{width: '-webkit-fill-available'}} className={`p-4 ${portfolioData.prototypeIframeURL ? '' : 'px-10'} flex flex-col`}>
                <div className="flex flex-row self-auto justify-between">
                    {(currentPageIdx > 0) && <span className="cursor-pointer" onClick={() => setCurrentPageIdx(currentPageIdx - 1)}><FontAwesomeIcon width={50} height={50} icon={faChevronCircleLeft} className="fas fa-chevron-circle-left" style={{ color: "white" }} /></span>}
                    {(currentPageIdx < pageLength - 1) && <span className="cursor-pointer" onClick={() => setCurrentPageIdx(currentPageIdx + 1)}><FontAwesomeIcon width={25} height={50} icon={faChevronCircleRight} className="fas fa-chevron-circle-right" style={{ color: "white" }} /></span>}
                </div>
                <div className=" w-fit self-center pb-1 border-b-2 border-white">{portfolioData.title}</div>
                <div>{portfolioData.description}</div>
                {portfolioData.prototypeIframeURL && <div style={{minHeight: '100%'}} className="my-4 h-fit flex flex-row justify-center">
                    {/* {<embed
                        src={portfolioData.prototypeIframeURL}
                        style={{
                            width: "100%",
                            minWidth: "100%",
                            minHeight: '100%',
                            height: '1px'
                        }}
                    />} */}
                    {portfolioData.heroImgSrc && <Link className="w-full h-full align-middle flex flex-row justify-center" href={portfolioData.prototypeIframeURL} target="#">
                        <div className="flex flex-row justify-center">
                            <span>
                                <div className="mb-8 w-full flex-row flex justify-center bg-white"><Image height={300} width={300} src={portfolioData.heroImgSrc} alt=""/></div>
                            </span>
                        </div>
                    </Link>}
                </div>}
            </div>
        </div>
        
    );
};

export default ContentCarousel;