import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

import TrashCards, { Trash } from "@/components/cards/TrashCards";
import EmptyRecords from "@/components/common/EmptyRecords";

const TrashPage = () => {
    const trashData: Trash[] = [
        {
            file: "/images/image1.png",
            description: "Elephants drinking water",
            filetype: "image",
            filesize: "74MB"
        },
        {
            file: "/images/image2.png",
            description: "wonderful sunrise in an aug...",
            filetype: "image",
            filesize: "7MB"
        },
        {
            file: "/images/image3.png",
            description: "Beautiful selective focus sh...",
            filetype: "image",
            filesize: "23MB"
        },
        {
            file: "/images/image4.png",
            description: "Urban double exposure port...",
            filetype: "image",
            filesize: "18MB"
        },
        {
            file: "/images/image5.png",
            description: "Closeup shot of a beautiful...",
            filetype: "image",
            filesize: "56KB"
        }
    ]

    return (
        <div className="w-full h-screen flex flex-col p-10 bg-[#F3F3F3]">
            <Tabs defaultValue="ebooks" className="w-full">
                <TabsList className="w-full md:w-fit bg-transparent">
                    <TabsTrigger value="ebooks" className="border-b-2 border-transparent data-[state=active]:border-b-primary rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">Ebooks</TabsTrigger>
                    <TabsTrigger value="images" className="border-b-2 border-transparent data-[state=active]:border-b-primary rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">Images</TabsTrigger>
                    <TabsTrigger value="videos" className="border-b-2 border-transparent data-[state=active]:border-b-primary rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">Videos</TabsTrigger>
                    <TabsTrigger value="audios" className="border-b-2 border-transparent data-[state=active]:border-b-primary rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">Audios</TabsTrigger>
                </TabsList>
                <TabsContent value="ebooks">
                    <EmptyRecords image="/images/noEbook.png" longDescription="Any ebooks you trashed will end up here. You’ll have 30 days to restore them before they’re automatically deleted from your Trash." shortDescription="There’s nothing in your Trash" />
                </TabsContent>
                <TabsContent value="images">
                    <div className="flex-col flex gap-4 mt-4">
                        <div className="flex  items-center bg-gray-200/20 p-2 rounded-md ">
                            <p className="text-sm font-medium">Any images you’ve trashed can be found here. Please note that the images deleted from the Trash won’t be removed from the existing ebooks. The images will only be deleted if those ebooks are deleted.</p>
                        </div>
                        <div className="flex flex-wrap md:flex-nowrap gap-4 justify-center md:justify-start">
                            {trashData.map((data, index) => (
                                <TrashCards key={index} {...data} />
                            ))}
                        </div>
                    </div>

                </TabsContent>
                <TabsContent value="videos">
                    <EmptyRecords image="/images/noVideo.png" longDescription="Any videos you trashed will end up here. You’ll have 30 days to restore them before they’re automatically deleted from your Trash." shortDescription="There’s nothing in your Trash" />
                </TabsContent>
                <TabsContent value="audios">
                    <EmptyRecords image="/images/noAudio.png" longDescription="Any audios you trashed will end up here. You’ll have 30 days to restore them before they’re automatically deleted from your Trash." shortDescription="There’s nothing in your Trash" />

                </TabsContent>
            </Tabs>
        </div>
    );
}

export default TrashPage;