import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { RealtimeLocation } from './monitoring/RealtimeLocation';
import { WorkStatus } from './monitoring/WorkStatus';
import { OperationData } from './monitoring/OperationData';
import { MapPin, Activity, BarChart3 } from 'lucide-react';

export function EquipmentMonitoring() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-success">设备实时监控与定位</h2>
        <p className="text-muted-foreground">实时追踪农机位置、工作状态和作业数据</p>
      </div>

      <Tabs defaultValue="location" className="space-y-6">
        <TabsList className="grid w-full grid-cols-3 max-w-[600px]">
          <TabsTrigger value="location" className="flex items-center gap-2">
            <MapPin className="w-4 h-4" />
            实时位置
          </TabsTrigger>
          <TabsTrigger value="status" className="flex items-center gap-2">
            <Activity className="w-4 h-4" />
            工作状态
          </TabsTrigger>
          <TabsTrigger value="data" className="flex items-center gap-2">
            <BarChart3 className="w-4 h-4" />
            作业数据
          </TabsTrigger>
        </TabsList>

        <TabsContent value="location">
          <RealtimeLocation />
        </TabsContent>

        <TabsContent value="status">
          <WorkStatus />
        </TabsContent>

        <TabsContent value="data">
          <OperationData />
        </TabsContent>
      </Tabs>
    </div>
  );
}
