import { CircleAlert } from "lucide-react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

type DashboardUnavailableProps = {
  message?: string | null;
};

export function DashboardUnavailable({ message }: DashboardUnavailableProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 leading-none">
          <CircleAlert className="size-4 text-muted-foreground" />
          Dashboard overview unavailable
        </CardTitle>
        <CardDescription>
          Live KPIs and activity could not be loaded. No placeholder metrics are shown.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground text-sm">
          {message?.trim() || "Try again shortly, or check that customer and order services are reachable."}
        </p>
      </CardContent>
    </Card>
  );
}