Notifications Center

import { Card, CardContent } from "./components/ui/card"
import { Badge } from "./components/ui/badge"
import { Button } from "./components/ui/button"
import { CheckCircle, AlertTriangle, Info, Trash2 } from "lucide-react"

export default function NotificationsCenter() {
  const notifications = [
    {
      type: "success",
      title: "Energy goal achieved",
      message: "You've produced 150% of your daily energy target!",
      time: "2 hours ago",
      unread: true
    },
    {
      type: "warning",
      title: "Low battery alert",
      message: "Battery storage is below 20%. Consider reducing usage.",
      time: "5 hours ago",
      unread: true
    },
    {
      type: "info",
      title: "System update available",
      message: "A new firmware update is available for your inverter.",
      time: "1 day ago",
      unread: false
    },
    {
      type: "success",
      title: "Grid export complete",
      message: "Successfully exported 12.5 kWh to the grid today.",
      time: "1 day ago",
      unread: false
    },
  ]

  const getIcon = (type: string) => {
    switch (type) {
      case "success": return CheckCircle
      case "warning": return AlertTriangle
      default: return Info
    }
  }

  return (
    <div className="p-6 space-y-6 max-w-4xl mx-auto">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Notifications</h1>
          <p className="text-muted-foreground">Stay updated with your energy system</p>
        </div>
        <Button variant="outline">Mark all as read</Button>
      </div>

      <div className="space-y-2">
        {notifications.map((notification, i) => {
          const Icon = getIcon(notification.type)
          return (
            <Card key={i} className={notification.unread ? "border-primary/50" : ""}>
              <CardContent className="p-4">
                <div className="flex items-start gap-4">
                  <div className={`h-10 w-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
                    notification.type === "success" ? "bg-green-500/20" :
                    notification.type === "warning" ? "bg-yellow-500/20" : "bg-blue-500/20"
                  }`}>
                    <Icon className={`h-5 w-5 ${
                      notification.type === "success" ? "text-green-600" :
                      notification.type === "warning" ? "text-yellow-600" : "text-blue-600"
                    }`} />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-start justify-between gap-2">
                      <div>
                        <div className="flex items-center gap-2">
                          <p className="font-medium">{notification.title}</p>
                          {notification.unread && (
                            <div className="h-2 w-2 bg-primary rounded-full" />
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mt-1">
                          {notification.message}
                        </p>
                        <p className="text-xs text-muted-foreground mt-2">
                          {notification.time}
                        </p>
                      </div>
                      <Button variant="ghost" size="icon">
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>
    </div>
  )
}