import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Plug, Thermometer, Weight, Activity, Database } from 'lucide-react';
import { cn } from '../ui/utils';

export function SensorsNetwork() {
  const sensors = [
    { name: 'Temp', icon: Thermometer, status: '97% online', color: 'bg-green-100 text-green-600' },
    { name: 'Weight', icon: Weight, status: '92% online', color: 'bg-green-100 text-green-600' },
    { name: 'Motion', icon: Activity, status: '85% online', color: 'bg-yellow-100 text-yellow-600' },
    { name: 'Quality', icon: Database, status: '63% online', color: 'bg-red-100 text-red-600' },
  ];

  return (
    <Card className="col-span-1 md:col-span-2 shadow-sm">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div className="flex items-center gap-2">
          <Plug className="w-5 h-5 text-blue-600" />
          <CardTitle className="text-base font-semibold">Sensors Network</CardTitle>
        </div>
        <Button variant="outline" size="sm" className="h-7 text-xs bg-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100">
          Manage
        </Button>
      </CardHeader>
      <CardContent>
        <div className="text-xs text-muted-foreground mb-6">Device status monitoring</div>
        <div className="grid grid-cols-4 gap-4">
          {sensors.map((sensor, index) => (
            <div key={index} className="flex flex-col items-center justify-center text-center">
              <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-3 transition-transform hover:scale-105", sensor.color)}>
                <sensor.icon className="w-6 h-6" />
              </div>
              <div className="text-sm font-semibold text-gray-900">{sensor.name}</div>
              <div className="text-xs text-gray-500">{sensor.status}</div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}