'use client'

import { Building2, ShoppingCart } from 'lucide-react'
import { useState } from 'react'

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

// Импорты компонентов подразделов
import { FulfillmentSuppliesTab } from './fulfillment-supplies-tab'
import { MarketplaceSuppliesTab } from './marketplace-supplies-tab'

export function GoodsSuppliesTab() {
  const [activeSubTab, setActiveSubTab] = useState('fulfillment')

  return (
    <div className="h-full flex flex-col p-4">
      {/* Подвкладки */}
      <div className="flex-1 overflow-hidden">
        <Tabs value={activeSubTab} onValueChange={setActiveSubTab} className="h-full flex flex-col">
          <TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0 mb-3 h-9">
            <TabsTrigger
              value="fulfillment"
              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-sm"
            >
              <Building2 className="h-3 w-3" />
              Фулфилмент
            </TabsTrigger>
            <TabsTrigger
              value="marketplace"
              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-sm"
            >
              <ShoppingCart className="h-3 w-3" />
              Маркетплейсы
            </TabsTrigger>
          </TabsList>

          <TabsContent value="fulfillment" className="flex-1 overflow-hidden">
            <FulfillmentSuppliesTab />
          </TabsContent>

          <TabsContent value="marketplace" className="flex-1 overflow-hidden">
            <MarketplaceSuppliesTab />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
