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>
  );
}