Tabs

"use client";

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

const settings = {
  variant: "underline",
  size: "md",
};

const PANELS = [
  {
    value: "overview",
    label: "Overview",
    stats: [
      { label: "Revenue", value: "$48.2k", delta: "+18%" },
      { label: "Customers", value: "1,284", delta: "+6%" },
      { label: "Churn", value: "1.9%", delta: "-0.4%" },
    ],
  },
  {
    value: "analytics",
    label: "Analytics",
    stats: [
      { label: "Visitors", value: "12.4k", delta: "+9%" },
      { label: "Sessions", value: "31.8k", delta: "+12%" },
      { label: "Bounce", value: "38%", delta: "-3%" },
    ],
  },
  {
    value: "reports",
    label: "Reports",
    stats: [
      { label: "Ready", value: "3", delta: "new" },
      { label: "Scheduled", value: "7", delta: "weekly" },
      { label: "Shared", value: "12", delta: "team" },
    ],
  },
  {
    value: "settings",
    label: "Settings",
    stats: [
      { label: "Members", value: "8", delta: "2 pending" },
      { label: "Region", value: "EU", delta: "Frankfurt" },
      { label: "Plan", value: "Pro", delta: "annual" },
    ],
  },
];

export default function TabsDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const size = s.size as "sm" | "md" | "lg";

  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-xl space-y-5">
        <div className="rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
          <Tabs
            defaultValue="overview"
            variant={s.variant as "default" | "underline" | "pills" | "segmented"}
            size={size}
          >
            <TabsList>
              {PANELS.map(({ value, label }) => (
                <TabsTrigger key={value} value={value}>
                  {label}
                </TabsTrigger>
              ))}
            </TabsList>
            {PANELS.map((panel) => (
              <TabsContent key={panel.value} value={panel.value} className="pt-5">
                <div className="grid grid-cols-3 gap-3">
                  {panel.stats.map((stat) => (
                    <div key={stat.label} className="rounded-lg border border-border bg-background p-3">
                      <p className="text-xs text-muted-foreground">{stat.label}</p>
                      <p className="mt-1 text-lg font-semibold tracking-tight">{stat.value}</p>
                      <p className="text-xs text-muted-foreground">{stat.delta}</p>
                    </div>
                  ))}
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>

        <div className="flex justify-center">
          <Tabs defaultValue="month" variant="segmented" size={size}>
            <TabsList>
              <TabsTrigger value="day">Day</TabsTrigger>
              <TabsTrigger value="week">Week</TabsTrigger>
              <TabsTrigger value="month">Month</TabsTrigger>
              <TabsTrigger value="year">Year</TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      </div>
    </div>
  );
}