import { ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function GrafanaAddonPage() {
	const grafanaUrl =
		(import.meta.env.VITE_GRAFANA_URL as string | undefined) ||
		"http://localhost:3000";

	return (
		<div className="flex flex-col gap-4">
			<h2 className="text-xl font-semibold">Grafana</h2>
			<Card>
				<CardHeader>
					<CardTitle>Metrics & logs</CardTitle>
				</CardHeader>
				<CardContent className="flex flex-col gap-3">
					<p className="text-sm text-muted-foreground">
						Open the full Grafana instance for dashboards, metrics, and log
						exploration.
					</p>
					<Button asChild>
						<a
							href={grafanaUrl}
							target="_blank"
							rel="noopener noreferrer"
							className="inline-flex items-center"
						>
							Open Grafana
							<ExternalLink className="ml-2 h-4 w-4" />
						</a>
					</Button>
				</CardContent>
			</Card>
		</div>
	);
}