Followup panel

import { Button } from '@hey-mike/tungsten';

export default function FollowupPanelRecipe() {
  return (
    <details className="bg-surface border-stroke group overflow-hidden rounded-xl border">
      <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4">
        <div>
          <p className="text-ink-1 text-sm font-semibold">
            Followup question · How would you handle a 10× spike?
          </p>
          <p className="text-ink-3 mt-0.5 text-xs">Asked after evaluation · 1 min</p>
          <span className="text-ink-3 text-xs">1 of 3 rounds completed · click to continue</span>
        </div>
        <div className="flex shrink-0 items-center gap-3">
          <span className="text-brand ml-auto font-mono text-xs font-semibold">Continue →</span>
          <span className="text-ink-3 transition-transform group-open:rotate-180">▾</span>
        </div>
      </summary>
      <div className="border-stroke space-y-3 border-t px-5 py-4">
        <p className="text-ink-2 text-sm leading-[1.6]">
          Walk through the failure modes you would expect first, then the mitigations you would
          reach for in order.
        </p>
        <Button variant="primary" size="sm">
          Answer now
        </Button>
      </div>
    </details>
  );
}