import type { ReactNode } from 'react';
import type { ParsedLesson } from '@core/lesson-parse';
import styles from './Learn.module.css';

/**
 * The `/learn/` index: the section intro plus a card per lesson linking to its own
 * page (`/learn/<slug>/`). Lessons arrive from the markdown glob (see `lessons.ts`);
 * each card's URL matches a generated shell.
 */
export function LearnIndex({ lessons }: { lessons: ParsedLesson[] }): ReactNode {
  return (
    <div className={styles.index}>
      <p className={styles.kickerLine}>Deep dives</p>
      <h1 className={styles.title}>Vega-Lite, deeper</h1>
      <p className={styles.indexLede}>
        Advanced Vega-Lite, worked end to end: linked selections, composition, and the transforms
        that do the real work. Each page starts from a spec that already renders and takes it
        somewhere the reference docs stop short of.
      </p>
      <p className={styles.indexAside}>
        New to Vega-Lite? The{' '}
        <a href="https://vega.github.io/vega-lite/docs/" target="_blank" rel="noopener noreferrer">
          official docs
        </a>{' '}
        and{' '}
        <a
          href="https://vega.github.io/vega-lite/tutorials/getting_started.html"
          target="_blank"
          rel="noopener noreferrer"
        >
          getting-started tutorial
        </a>{' '}
        cover the basics — these pages pick up after that.
      </p>
      <ul className={styles.cards}>
        {lessons.map((lesson) => (
          <li key={lesson.slug}>
            <a className={styles.card} href={`/learn/${lesson.slug}/`}>
              <span className={styles.cardKicker}>Deep dive</span>
              <h2 className={styles.cardTitle}>{lesson.title}</h2>
              <p className={styles.cardTagline}>{lesson.tagline}</p>
              <span className={styles.cardMore}>Read →</span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}
