import type { CrosswordResponse } from "@/lib/types";

type ClueListProps = {
  crossword: CrosswordResponse;
  labels: {
    across: string;
    down: string;
  };
};

export function ClueList({ crossword, labels }: ClueListProps) {
  return (
    <div className="clue-list">
      <section className="clue-section">
        <h3>{labels.across}</h3>
        <ul className="clue-section__list">
          {crossword.clues.across.map((clue) => (
            <li className="clue-item" key={clue.entry_id}>
              <strong>{clue.number}.</strong> {clue.text} <span className="muted">({clue.enumeration})</span>
            </li>
          ))}
        </ul>
      </section>

      <section className="clue-section">
        <h3>{labels.down}</h3>
        <ul className="clue-section__list">
          {crossword.clues.down.map((clue) => (
            <li className="clue-item" key={clue.entry_id}>
              <strong>{clue.number}.</strong> {clue.text} <span className="muted">({clue.enumeration})</span>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}