"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { ServicesTab } from './services-tab'
import { SuppliesTab } from './supplies-tab'
import { LogisticsTab } from './logistics-tab'

export function ServicesDashboard() {
  const { getSidebarMargin } = useSidebar()
  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
        <div className="h-full w-full flex flex-col">
          {/* Основной контент с табами */}
          <div className="flex-1 overflow-hidden">
            <Tabs defaultValue="services" className="h-full flex flex-col">
              <TabsList className="grid w-full grid-cols-3 bg-white/5 backdrop-blur border-white/10 flex-shrink-0">
                <TabsTrigger 
                  value="services" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Услуги
                </TabsTrigger>
                <TabsTrigger 
                  value="logistics" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Логистика
                </TabsTrigger>
                <TabsTrigger 
                  value="supplies" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Расходники
                </TabsTrigger>
              </TabsList>

              {/* Контент вкладок */}
              <div className="flex-1 overflow-hidden mt-4">
                <TabsContent value="services" className="h-full m-0 overflow-hidden">
                  <ServicesTab />
                </TabsContent>
                
                <TabsContent value="logistics" className="h-full m-0 overflow-hidden">
                  <LogisticsTab />
                </TabsContent>
                
                <TabsContent value="supplies" className="h-full m-0 overflow-hidden">
                  <SuppliesTab />
                </TabsContent>
              </div>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}