"use client";

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

export interface SettingsTab {
  value: string;
  label: string;
  icon: React.ReactNode;
  content: React.ReactNode;
}

/**
 * Vertical settings navigation: a pill-style tab list that stays
 * visible on the left while each section scrolls independently.
 */
export function SettingsTabs({
  tabs,
  defaultValue,
}: {
  tabs: SettingsTab[];
  defaultValue: string;
}) {
  return (
    <Tabs
      orientation="vertical"
      defaultValue={defaultValue}
      className="flex-col items-stretch gap-5 md:flex-row md:items-start lg:gap-8"
    >
      <TabsList className="w-full md:w-60 md:shrink-0 md:flex-col md:justify-start md:items-stretch md:sticky md:top-16">
        {tabs.map((tab) => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            className="w-full justify-start gap-2.5 px-3 py-2 text-sm"
          >
            {tab.icon}
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>

      {tabs.map((tab) => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className="min-w-0 flex-1"
        >
          {tab.content}
        </TabsContent>
      ))}
    </Tabs>
  );
}