"use client"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { TimeshiftSpreadsheet } from "./timeshift-spreadsheet"
import { ScheduleHistory } from "./schedule-history"
import { ScheduleTemplates } from "./schedule-templates"
import { Calendar, History, FileIcon as FileTemplate, Table } from "lucide-react"

interface ScheduleTabsProps {
  teamId: string
  teamName: string
}

export function ScheduleTabs({ teamId, teamName }: ScheduleTabsProps) {
  return (
    <Tabs defaultValue="current" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="current" className="flex items-center gap-2">
          <Table className="size-4" />
          Current Schedule
        </TabsTrigger>
        <TabsTrigger value="history" className="flex items-center gap-2">
          <History className="size-4" />
          History
        </TabsTrigger>
        <TabsTrigger value="templates" className="flex items-center gap-2">
          <FileTemplate className="size-4" />
          Templates
        </TabsTrigger>
        <TabsTrigger value="calendar" className="flex items-center gap-2">
          <Calendar className="size-4" />
          Calendar View
        </TabsTrigger>
      </TabsList>

      <TabsContent value="current" className="mt-4">
        <TimeshiftSpreadsheet teamId={teamId} teamName={teamName} />
      </TabsContent>

      <TabsContent value="history" className="mt-4">
        <ScheduleHistory teamId={teamId} teamName={teamName} />
      </TabsContent>

      <TabsContent value="templates" className="mt-4">
        <ScheduleTemplates teamId={teamId} teamName={teamName} />
      </TabsContent>

      <TabsContent value="calendar" className="mt-4">
        <div className="flex items-center justify-center h-96 border-2 border-dashed border-gray-300 rounded-lg">
          <div className="text-center">
            <Calendar className="size-12 mx-auto mb-4 text-gray-400" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">Calendar View</h3>
            <p className="text-gray-500">Calendar view coming soon...</p>
          </div>
        </div>
      </TabsContent>
    </Tabs>
  )
}