"use client";

import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ShoppingCart, Package } from "lucide-react";

// Импорты компонентов маркетплейсов
import { WildberriesSuppliesTab } from "./wildberries-supplies-tab";
import { OzonSuppliesTab } from "./ozon-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-10 mb-3 mx-4 mt-4">
          <TabsTrigger
            value="wildberries"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-xs"
          >
            <div className="w-3 h-3 bg-purple-500 rounded-sm flex items-center justify-center">
              <span className="text-white text-[8px] font-bold">W</span>
            </div>
            Wildberries
          </TabsTrigger>
          <TabsTrigger
            value="ozon"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-xs"
          >
            <div className="w-3 h-3 bg-blue-500 rounded-sm flex items-center justify-center">
              <span className="text-white text-[8px] font-bold">O</span>
            </div>
            Ozon
          </TabsTrigger>
        </TabsList>

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

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