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

type CrosswordAnswerKeyProps = {
  crossword: CrosswordResponse;
  labels: {
    across: string;
    down: string;
    answer: string;
    clue: string;
  };
};

export function CrosswordAnswerKey({ crossword, labels }: CrosswordAnswerKeyProps) {
  const acrossEntries = crossword.entries.filter((entry) => entry.direction === "across");
  const downEntries = crossword.entries.filter((entry) => entry.direction === "down");

  function renderEntries(entries: typeof acrossEntries) {
    return (
      <ol className="answer-key__list">
        {entries.map((entry) => (
          <li className="answer-key__item" key={entry.entry_id}>
            <div className="answer-key__heading">
              <strong>{entry.number}.</strong>
              <span className="muted">{labels.answer}:</span>
              <span className="answer-key__answer">{entry.answer}</span>
              <span className="muted">({entry.answer_length})</span>
            </div>
            <p>
              <strong>{labels.clue}:</strong> {entry.clue}
            </p>
          </li>
        ))}
      </ol>
    );
  }

  return (
    <div className="answer-key">
      <section className="answer-key__section">
        <h3>{labels.across}</h3>
        {renderEntries(acrossEntries)}
      </section>

      <section className="answer-key__section">
        <h3>{labels.down}</h3>
        {renderEntries(downEntries)}
      </section>
    </div>
  );
}