import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { LoadDevice } from './load/LoadDevice';
import { LoadType } from './load/LoadType';
import { LoadParameter } from './load/LoadParameter';
import { LoadDeviceLibrary } from './load/LoadDeviceLibrary';
import { Package, List, Settings, Database } from 'lucide-react';

export function LoadManagement() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-primary">农机负载管理</h2>
        <p className="text-muted-foreground">管理农机挂载设备及参数配置</p>
      </div>

      <Tabs defaultValue="types" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4 max-w-[800px]">
          <TabsTrigger value="types" className="flex items-center gap-2">
            <List className="w-4 h-4" />
            负载类型
          </TabsTrigger>
          <TabsTrigger value="parameters" className="flex items-center gap-2">
            <Settings className="w-4 h-4" />
            负载参数
          </TabsTrigger>
          <TabsTrigger value="library" className="flex items-center gap-2">
            <Database className="w-4 h-4" />
            负载设备
          </TabsTrigger>
          <TabsTrigger value="devices" className="flex items-center gap-2">
            <Package className="w-4 h-4" />
            负载管理
          </TabsTrigger>
        </TabsList>

        <TabsContent value="types">
          <LoadType />
        </TabsContent>

        <TabsContent value="parameters">
          <LoadParameter />
        </TabsContent>

        <TabsContent value="library">
          <LoadDeviceLibrary />
        </TabsContent>

        <TabsContent value="devices">
          <LoadDevice />
        </TabsContent>
      </Tabs>
    </div>
  );
}
