'use client'

import React, { 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 [activeSubTab, setActiveSubTab] = useState('wildberries')

  return (
    <div className="h-full">
      <Tabs value={activeSubTab} onValueChange={setActiveSubTab} className="w-full h-full flex flex-col">
        {/* Подвкладки для Маркетплейсов - Уровень 2 иерархии */}
        <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 mb-4 ml-4">
          <TabsList className="grid grid-cols-2 bg-transparent w-fit">
            <TabsTrigger
              value="wildberries"
              className="h-9 font-medium bg-white/8 border-white/20 data-[state=active]:bg-white/15 data-[state=active]:text-white text-white/60 px-6 rounded-lg"
            >
              Поставки на Wildberries
            </TabsTrigger>
            <TabsTrigger
              value="ozon"
              className="h-9 font-medium bg-white/8 border-white/20 data-[state=active]:bg-white/15 data-[state=active]:text-white text-white/60 px-6 rounded-lg"
            >
              Поставки на Ozon
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="wildberries" className="mt-0 flex-1">
          <WildberriesSuppliesTab />
        </TabsContent>

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