export function RecoveryCodes({ codes }: { codes: string[] }) {
  return (
    <output className="block space-y-2 rounded-md border border-emerald-800 bg-emerald-950/40 p-3">
      <p className="text-xs text-emerald-300">
        Save these recovery codes somewhere safe. Each works once, and they won't be shown again.
      </p>
      <ul className="grid grid-cols-2 gap-1 font-mono text-sm text-white">
        {codes.map((code) => (
          <li key={code}>{code}</li>
        ))}
      </ul>
    </output>
  );
}