import { Button } from "../components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "../components/ui/card"
import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
} from "../components/ui/tabs"
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "../components/ui/carousel"

const data = [{
    value: "thisPage",
    handle: "1",
    title: "This Page",
    description: "random text",
    images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
}, {
    value: "thatPage",
    title: "That Page",
    handle: "2",
    description: "random text",
    images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
}, {
    value: "otherPge",
    title: "Other Page",
    handle: "3",
    description: "random text",
    images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
}];

export function ShowcaseTabs() {
    return (
        <Tabs defaultValue={data[0].value} className="h-full">

            {data.map((item) => (
                <TabsContent value={item.value} className="">
                    <Card className="h-full">
                        <CardHeader>
                            <CardTitle>{item.title}</CardTitle>
                            <CardDescription>
                                {item.description}
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
                                <CarouselContent>
                                    {item.images.map((image, index) => (
                                        <CarouselItem key={index}>
                                            <Card>
                                                <CardContent className="flex aspect-square items-center justify-center p-6">
                                                    <img src={image.src} alt={image.alt} />
                                                </CardContent>
                                            </Card>
                                        </CarouselItem>
                                    ))}
                                </CarouselContent>
                                <div className="w-full pt-10 grid grid-cols-2 gap-4 ">
                                    <div className="col-start-1 flex text-center justify-center w-full h-full">
                                        <CarouselPrevious />
                                    </div>
                                    <div className="col-start-2 flex justify-center">
                                        <CarouselNext />
                                    </div>
                                </div>
                            </Carousel>
                        </CardContent>
                    </Card>
                </TabsContent>
            ))
            }

            <TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
                {data.map((item) => (
                    <TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
                ))}
            </TabsList>

        </Tabs>
    )
}