export function ProsCons({ pros, cons }: { pros: string[]; cons: string[] }) {
  if (pros.length === 0 && cons.length === 0) return null;

  return (
    <section aria-labelledby="proscons-heading">
      <h2 id="proscons-heading" className="stat-label mb-3 !text-signal">
        Pros &amp; Cons
      </h2>
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="hud-panel-sm p-4">
          <div className="mb-2 font-display text-sm font-semibold text-signal">Strengths</div>
          <ul className="space-y-2 text-sm text-mist/90">
            {pros.map((p) => (
              <li key={p} className="flex gap-2">
                <span aria-hidden className="text-signal">+</span>
                {p}
              </li>
            ))}
          </ul>
        </div>
        <div className="hud-panel-sm p-4">
          <div className="mb-2 font-display text-sm font-semibold text-ember">Limitations</div>
          <ul className="space-y-2 text-sm text-mist/90">
            {cons.map((c) => (
              <li key={c} className="flex gap-2">
                <span aria-hidden className="text-ember">
                  −
                </span>
                {c}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
