/**
 * DistanceSection — "How far the last place went".
 *
 * Its own section rather than a third tab inside Admissions.
 *
 * It began as a tab, which broke the admissions card in a way worth recording:
 * the two admissions views are stacked in one grid cell so switching them never
 * shifts layout, which means the card is sized by its TALLEST view. A view
 * carrying a chart, a table and a map came to 1402px against the tile grid's
 * 316px, so the default view — the one nobody had clicked — rendered as four
 * tiles adrift in ~1080px of blank card, and Admissions alone accounted for
 * half the height of every section on the page.
 *
 * The structural point stands on its own though: every other topic here is a
 * section with a nav entry, and "how close did we need to live, and would we
 * have got in?" is a topic, not a variant reading of the intake figures. The
 * headline number stays on the Admissions tile where the intake story is; the
 * record behind it lives here.
 *
 * Server component; the map and postcode form carry their own client boundary.
 */

import type { School, SchoolAdmissions, SchoolAdmissionDistance } from '@/lib/types';
import { Section, sectionStyles as styles } from './sectionShared';
import { CutoffDistanceDetail } from './CutoffDistanceDetail';
import { cutoffYearRows, hasCutoffDetail } from './lastDistanceOffered';

export function DistanceSection({
  admissionDistanceHistory,
  admissionsHistory,
  schoolInfo,
}: {
  admissionDistanceHistory: SchoolAdmissionDistance[];
  admissionsHistory: SchoolAdmissions[];
  schoolInfo: School;
}) {
  const rows = cutoffYearRows(admissionDistanceHistory, admissionsHistory);
  if (!hasCutoffDetail(rows)) return null;

  return (
    <Section id="distance">
      <h2 className={styles.sectionTitle}>How far the last place went</h2>
      <p className={styles.sectionSubtitle}>
        The distance of the furthest home offered a place each year, and how your
        own address compares.
      </p>
      <CutoffDistanceDetail rows={rows} schoolInfo={schoolInfo} />
    </Section>
  );
}