import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Truck } from "lucide-react";

export function VehicleStatusWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const vehicles = [
    { id: '12가3456', type: '5톤 트럭', status: '정상', utilization: 85, maintenanceCost: 1200000 },
    { id: '34나5678', type: '1톤 트럭', status: '정상', utilization: 72, maintenanceCost: 800000 },
    { id: '56다7890', type: '화물차', status: '점검필요', utilization: 45, maintenanceCost: 1500000 }
  ];

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center space-x-3">
          <div className="w-6 h-6 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center">
            <Truck className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
          </div>
          <span>차량 현황</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {vehicles.map((vehicle: any, index: number) => (
            <div key={index} className="p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <div className="flex justify-between items-start mb-2">
                <div>
                  <p className="font-medium text-foreground">{vehicle.id}</p>
                  <p className="text-sm text-muted-foreground">{vehicle.type}</p>
                </div>
                <Badge 
                  variant={vehicle.status === '정상' ? 'default' : vehicle.status === '점검필요' ? 'secondary' : 'destructive'}
                >
                  {vehicle.status}
                </Badge>
              </div>
              <div className="grid grid-cols-2 gap-2 text-sm">
                <div>
                  <span className="text-muted-foreground">가동률: </span>
                  <span className="font-medium">{vehicle.utilization}%</span>
                </div>
                <div>
                  <span className="text-muted-foreground">유지비: </span>
                  <span className="font-medium">{(vehicle.maintenanceCost / 10000).toFixed(0)}만원</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
