Device List

import { Card, CardContent } from "./components/ui/card"
import { Input } from "./components/ui/input"
import { Badge } from "./components/ui/badge"
import { Button } from "./components/ui/button"
import { Search, Filter, MoreVertical, Power } from "lucide-react"

export default function DeviceList() {
  const devices = [
    { id: "DEV-001", name: "Solar Panel Array A", type: "Solar", status: "Online", power: "4.2 kW" },
    { id: "DEV-002", name: "Battery Storage Unit", type: "Battery", status: "Charging", power: "85%" },
    { id: "DEV-003", name: "Solar Panel Array B", type: "Solar", status: "Online", power: "3.8 kW" },
    { id: "DEV-004", name: "Inverter Unit 1", type: "Inverter", status: "Online", power: "8.0 kW" },
    { id: "DEV-005", name: "Wind Turbine", type: "Wind", status: "Offline", power: "0 kW" },
  ]

  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Devices</h1>
          <p className="text-muted-foreground">Manage your connected devices</p>
        </div>
        <Button>Add Device</Button>
      </div>

      <Card>
        <CardContent className="p-4">
          <div className="flex gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Search devices..." className="pl-9" />
            </div>
            <Button variant="outline">
              <Filter className="h-4 w-4 mr-2" />
              Filters
            </Button>
          </div>
        </CardContent>
      </Card>

      <div className="space-y-2">
        {devices.map((device) => (
          <Card key={device.id}>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="h-10 w-10 rounded-lg bg-primary/20 flex items-center justify-center">
                    <Power className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <p className="font-medium">{device.name}</p>
                    <p className="text-sm text-muted-foreground">{device.id} • {device.type}</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="text-right">
                    <p className="font-medium">{device.power}</p>
                    <Badge variant={device.status === "Online" ? "success" : device.status === "Charging" ? "default" : "destructive"}>
                      {device.status}
                    </Badge>
                  </div>
                  <Button variant="ghost" size="icon">
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}