import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../components/ui/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../components/ui/tabs";

import { data } from "../content/showcase";

export function ShowcaseTabs() {
  return (
    <Tabs
      defaultValue={data[0].value}
      className="bottom-0 flex flex-col h-full my-auto"
    >
      <TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
        {data.map((item) => (
          <TabsTrigger value={item.value} key={item.value}>{item.handle}</TabsTrigger>
        ))}
      </TabsList>
      {data.map((item) => (
        <TabsContent value={item.value} className="h-full" key={item.value}>
          <Card className="h-[90%] my-auto">
            <CardHeader>
              <CardTitle>{item.title}</CardTitle>
              <CardDescription>
                <span className="text-pretty">{item.description}</span>
              </CardDescription>
            </CardHeader>
            <CardContent className="h-[85%] w-full">
              <div className="h-full w-full">
                <img
                  src={item.image}
                  alt={item.imageAlt}
                  className="object-cover h-full w-full rounded-lg  "
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      ))}
    </Tabs>
  );
}