import { StatusDot } from "~/ui/StatusDot";
import { ExternalLink } from "~/ui/TextLink";

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-kumo-hairline">
      {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-kumo-default">{check.context}</span>
          <span className="truncate text-kumo-subtle">{check.description}</span>
          {check.targetUrl && (
            <ExternalLink href={new URL(check.targetUrl).pathname} className="ml-auto shrink-0 text-xs">
              Details
            </ExternalLink>
          )}
        </li>
      ))}
    </ul>
  );
}