import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";

interface Tab {
  id: string;
  label: string;
  icon?: LucideIcon;
  content: ReactNode;
}

interface TabbedPageTemplateProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  actions?: ReactNode;
  tabs: Tab[];
  defaultTab?: string;
}

export const TabbedPageTemplate = ({
  title,
  description,
  icon,
  actions,
  tabs,
  defaultTab
}: TabbedPageTemplateProps) => {
  return (
    <PageLayout>
      <PageHeader
        title={title}
        description={description}
        icon={icon}
        actions={actions}
      />
      
      <Tabs defaultValue={defaultTab || tabs[0]?.id}>
        <TabsList>
          {tabs.map((tab) => {
            const Icon = tab.icon;
            return (
              <TabsTrigger key={tab.id} value={tab.id}>
                {Icon && <Icon className="w-4 h-4 mr-2" />}
                {tab.label}
              </TabsTrigger>
            );
          })}
        </TabsList>
        
        {tabs.map((tab) => (
          <TabsContent key={tab.id} value={tab.id} className="space-y-4">
            {tab.content}
          </TabsContent>
        ))}
      </Tabs>
    </PageLayout>
  );
};
