Tabs

"use client";

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

export function TabsPreview() {
  const [value, setValue] = useState("overview");

  return (
    <Tabs
      className="w-full max-w-2xl"
      animateContent
      value={value}
      onValueChange={setValue}
    >
      <TabsList>
        <TabsTrigger value="overview">
          Overview
        </TabsTrigger>
        <TabsTrigger value="activity">
          Activity
        </TabsTrigger>
        <TabsTrigger value="files">
          Files
        </TabsTrigger>
      </TabsList>

        <TabsContent key="overview" value="overview">
          <div className="space-y-3 p-4">
            <p className="font-medium text-[15px] text-foreground tracking-[-0.02em]">
              Product workspace
            </p>
            <p className="text-[14px] text-secondary leading-6">
              Keep the main summary visible while switching between planning, delivery, and support details without leaving the current surface.
            </p>
          </div>
        </TabsContent>
        <TabsContent key="activity" value="activity">
          <div className="space-y-3 p-4">
            <p className="font-medium text-[15px] text-foreground tracking-[-0.02em]">
              Recent handoff
            </p>
            <p className="text-[14px] text-secondary leading-6">
              Review the last design review, implementation notes, and timeline updates in a compact panel that still feels grounded.
            </p>
          </div>
        </TabsContent>
        <TabsContent key="files" value="files">
          <div className="space-y-3 p-4">
            <p className="font-medium text-[15px] text-foreground tracking-[-0.02em]">
              Shared assets
            </p>
            <p className="text-[14px] text-secondary leading-6">
              Attach decks, mockups, and implementation references while preserving a clear transition between each content block.
            </p>
          </div>
        </TabsContent>
    </Tabs>
  );
}