hidden11/components/ClueList.tsx

import type { Dictionary } from "@/lib/i18n";

type ClueListProps = {
  clues: string[];
  collapsed: boolean;
  onToggleCollapsed: () => void;
  t: Dictionary;
};

export default function ClueList({ clues, collapsed, onToggleCollapsed, t }: ClueListProps) {
  return (
    <section className="overflow-hidden rounded-lg border border-emerald-200/30 bg-emerald-50 text-pitch-950 shadow-2xl shadow-black/20">
      <button
        type="button"
        onClick={onToggleCollapsed}
        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left"
        aria-expanded={!collapsed}
      >
        <span className="text-lg font-black">{t.clueTitle}</span>
        <span className="flex items-center gap-2">
          <span className="rounded-full bg-pitch-950 px-3 py-1 text-xs font-bold text-white">{clues.length}</span>
          <span className="text-xs font-black uppercase text-pitch-950/55">{collapsed ? t.show : t.hide}</span>
        </span>
      </button>
      {!collapsed ? (
        <ul className="space-y-3 px-4 pb-4">
          {clues.map((clue, index) => (
            <li key={clue} className="flex gap-3 rounded-lg bg-white p-3 text-sm font-semibold text-pitch-950 shadow-sm">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-pitch-800 text-xs font-black text-white">
                {index + 1}
              </span>
              <span className="leading-6">
                {t.clue[clue] ?? clue}
              </span>
            </li>
          ))}
        </ul>
      ) : null}
    </section>
  );
}