import type { LegacySpecialThanksEntry } from "../legacy/interop.js";

interface LegacySpecialThanksPanelProps {
  entries: LegacySpecialThanksEntry[];
  onShuffle: () => void;
}

export function LegacySpecialThanksPanel({
  entries,
  onShuffle,
}: LegacySpecialThanksPanelProps) {
  const primaryColumn = entries.filter((entry) => entry.group === 1);
  const secondaryColumn = entries.filter((entry) => entry.group === 2);

  return (
    <>
      <div className="panel-head">
        <h2>Special Thanks</h2>
        <p>
          This page is now backed by the original `specialthanks.json` pack
          instead of duplicated UI-only content.
        </p>
      </div>

      <div className="stage-actions">
        <button className="secondary-button" onClick={onShuffle} type="button">
          Shuffle order
        </button>
      </div>

      <div className="special-thanks-grid">
        <div className="special-thanks-column">
          {primaryColumn.map((entry, index) => (
            <article
              className="thanks-card"
              key={`thanks-primary-${entry.name}-${index}`}
            >
              <strong style={entry.color ? { color: entry.color } : undefined}>
                {String(entry.name)}
              </strong>
              {entry.comment ? <p>{entry.comment}</p> : null}
            </article>
          ))}
        </div>
        <div className="special-thanks-column">
          {secondaryColumn.map((entry, index) => (
            <article
              className="thanks-card"
              key={`thanks-secondary-${entry.name}-${index}`}
            >
              <strong style={entry.color ? { color: entry.color } : undefined}>
                {String(entry.name)}
              </strong>
              {entry.comment ? <p>{entry.comment}</p> : null}
            </article>
          ))}
        </div>
      </div>
    </>
  );
}
