import { StatusDot } from "./ui/Primitives";
type Check = { context: string; state: string; description: string | null; targetUrl: string | null };
export function StatusList({ checks }: { checks: Check[] }) {
if (checks.length === 0) return null;
return (
<ul className="divide-y divide-gray-800/70">
{checks.map((check) => (
<li key={check.context} className="flex items-center gap-3 px-4 py-2 text-sm">
<StatusDot state={check.state} />
<span className="font-medium text-gray-200">{check.context}</span>
<span className="truncate text-gray-500">{check.description}</span>
{check.targetUrl && (
<a
href={new URL(check.targetUrl).pathname}
className="ml-auto shrink-0 text-xs text-accent-400 hover:underline"
>
Details
</a>
)}
</li>
))}
</ul>
);
}