Site Details

import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
import { Badge } from "./components/ui/badge"
import { Button } from "./components/ui/button"
import { MapPin, Zap, TrendingUp, Settings } from "lucide-react"

export default function SiteDetails() {
  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-start justify-between">
            <div className="flex items-start gap-4">
              <div className="h-16 w-16 rounded-lg bg-primary/20 flex items-center justify-center">
                <MapPin className="h-8 w-8 text-primary" />
              </div>
              <div>
                <h1 className="text-2xl font-bold">Stockholm Energy Hub</h1>
                <p className="text-muted-foreground">ID: SITE-001 • Stockholm, Sweden</p>
                <div className="flex gap-2 mt-2">
                  <Badge variant="success">Online</Badge>
                  <Badge variant="secondary">Residential</Badge>
                </div>
              </div>
            </div>
            <Button>
              <Settings className="h-4 w-4 mr-2" />
              Settings
            </Button>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Production</CardTitle>
            <Zap className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">8.4 kW</div>
            <p className="text-xs text-muted-foreground">+18% from yesterday</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Battery Level</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">92%</div>
            <p className="text-xs text-muted-foreground">16.5 kWh available</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Grid Status</CardTitle>
            <Zap className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">Exporting</div>
            <p className="text-xs text-muted-foreground">1.2 kW to grid</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Connected Devices</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {[
            { name: "Solar Array A", status: "Online", value: "4.2 kW" },
            { name: "Solar Array B", status: "Online", value: "4.2 kW" },
            { name: "Battery Storage", status: "Charging", value: "92%" },
          ].map((device, i) => (
            <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
              <div className="flex items-center gap-3">
                <Zap className="h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">{device.name}</p>
                  <Badge variant="success" className="mt-1">{device.status}</Badge>
                </div>
              </div>
              <div className="text-right">
                <p className="font-bold">{device.value}</p>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  )
}