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