'use client'

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

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

// Импорты компонентов маркетплейсов
import { OzonSuppliesTab } from './ozon-supplies-tab'
import { WildberriesSuppliesTab } from './wildberries-supplies-tab'

export function MarketplaceSuppliesTab() {
  const [activeTab, setActiveTab] = useState('wildberries')

  return (
    <div className="h-full flex flex-col">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
        <TabsList className="grid w-full grid-cols-2 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10 mb-2 xl:mb-3 mx-2 xl:mx-4 mt-2 xl:mt-4">
          <TabsTrigger
            value="wildberries"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-[10px] xl:text-xs"
          >
            <div className="w-2.5 h-2.5 xl:w-3 xl:h-3 bg-purple-500 rounded-sm flex items-center justify-center">
              <span className="text-white text-[6px] xl:text-[8px] font-bold">W</span>
            </div>
            <span className="hidden sm:inline">Wildberries</span>
            <span className="sm:hidden">WB</span>
          </TabsTrigger>
          <TabsTrigger
            value="ozon"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 xl:gap-2 text-[10px] xl:text-xs"
          >
            <div className="w-2.5 h-2.5 xl:w-3 xl:h-3 bg-blue-500 rounded-sm flex items-center justify-center">
              <span className="text-white text-[6px] xl:text-[8px] font-bold">O</span>
            </div>
            <span className="hidden sm:inline">Ozon</span>
            <span className="sm:hidden">OZ</span>
          </TabsTrigger>
        </TabsList>

        <TabsContent value="wildberries" className="flex-1 overflow-hidden">
          <WildberriesSuppliesTab />
        </TabsContent>

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