"use client";

import { useState, type ReactNode } from "react";
import { ImageIcon, Settings2Icon, UsersIcon, StickyNoteIcon, ActivityIcon } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export type EventWorkspaceTab = {
  id: string;
  label: string;
  content: ReactNode;
};

export function EventWorkspace({
  heading,
  tabs,
}: {
  heading: ReactNode;
  tabs: EventWorkspaceTab[];
}) {
  const initial = tabs[0]?.id ?? "photos";
  const [settingsVisited, setSettingsVisited] = useState(initial === "settings");
  const icons = { photos: ImageIcon, settings: Settings2Icon, people: UsersIcon, notes: StickyNoteIcon, activity: ActivityIcon, audit: ActivityIcon };

  return (
    <div className="reveal flex flex-col gap-6 sm:gap-8">
      {heading}
      {tabs.length === 0 ? null : (
        <Tabs defaultValue={initial} onValueChange={(value) => { if (value === "settings") setSettingsVisited(true); }} className="gap-5">
          <TabsList variant="line" aria-label="Event sections" className="w-full max-w-full justify-start gap-2 overflow-x-auto p-0 shadow-[inset_0_-1px_0_var(--border)] group-data-horizontal/tabs:h-12">
            {tabs.map((tab) => {
              const Icon = icons[tab.id as keyof typeof icons];
              return (
              <TabsTrigger
                key={tab.id}
                value={tab.id}
                className="h-full flex-none gap-2 rounded-none border-0 px-4 py-3 transition-colors data-[state=active]:text-primary after:bg-primary group-data-horizontal/tabs:after:bottom-0"
              >
                {Icon ? <Icon aria-hidden="true" /> : null}
                {tab.label}
              </TabsTrigger>
            ); })}
          </TabsList>
          {tabs.map((tab) => (
            <TabsContent key={tab.id} value={tab.id} forceMount={tab.id === "settings" && settingsVisited ? true : undefined} className="flex flex-col gap-4 data-[state=inactive]:hidden">
              {tab.content}
            </TabsContent>
          ))}
        </Tabs>
      )}
    </div>
  );
}