import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import Image from "next/image";
import Link from "next/link";
import {
  TabStyleWithLeftImage,
  TabStyleWithRightImage,
  TabStyleWithBottomImage,
  TabStyleWithTopImage,
  TabStyleWithRightImageAndCards,
  TabStyleWithLeftImageAndCards,
} from "@/components/showcase/TabStyles";

export const CategoryTabs = () => {
  return (
    <div className="px-4">
      <Tabs defaultValue="Betten" className="">
        <div className="ml-auto mr-auto max-w-fit my-3">
          <TabsList className="">
            <TabsTrigger value="Betten">Betten</TabsTrigger>
            <TabsTrigger value="Pflanzen">Pflanzen</TabsTrigger>
            <TabsTrigger value="Möbel">Möbel</TabsTrigger>
            <TabsTrigger value="Elektronik">Elektronik</TabsTrigger>
            <TabsTrigger value="Kleidung">Kleidung</TabsTrigger>
            <TabsTrigger value="Spielzeug">Spielzeug</TabsTrigger>
          </TabsList>
        </div>
        <TabsContent value="Betten" className="">
          <TabStyleWithLeftImage />
        </TabsContent>
        <TabsContent value="Pflanzen" className="">
          <TabStyleWithRightImage />
        </TabsContent>
        <TabsContent value="Möbel" className="">
          <TabStyleWithBottomImage />
        </TabsContent>
        <TabsContent value="Elektronik" className="">
          <TabStyleWithTopImage />
        </TabsContent>
        <TabsContent value="Kleidung" className="">
          <TabStyleWithRightImageAndCards />
        </TabsContent>
        <TabsContent value="Spielzeug" className="">
          <TabStyleWithLeftImageAndCards />
        </TabsContent>
      </Tabs>
    </div>
  );
};