school_compare/nextjs-app/components/school/DistanceSection.tsx

/**
 * DistanceSection — "How far away are you?"
 *
 * The section exists to answer one question a parent cannot answer from a
 * number alone: whether their own address falls inside it. The figure itself is
 * already on the Admissions tile above; this turns it into something they can
 * act on.
 *
 * Scope note. This used to carry the full published record — chart, year table
 * and a set of shrinking rings. Earlier years are now held back as a paid
 * feature and no longer leave the API at all, so what remains is the latest
 * year and the check against it. The pipeline is unchanged: every published
 * year is still loaded into fact_admission_distance, so restoring history for
 * entitled callers is a serving change rather than a re-collection.
 *
 * Server component; the map and postcode form carry their own client boundary.
 */

import type { School, SchoolAdmissionDistance } from '@/lib/types';
import { Section, sectionStyles as styles } from './sectionShared';
import { CutoffMapPanel } from './CutoffMapPanel';

export function DistanceSection({
  admissionDistance,
  schoolInfo,
}: {
  admissionDistance: SchoolAdmissionDistance | null;
  schoolInfo: School;
}) {
  // Without a figure there is nothing to compare against, and without
  // coordinates there is nothing to measure — CutoffMapPanel enforces the
  // second, but the section must not render an empty card either way.
  if (
    admissionDistance?.distance_m == null
    || schoolInfo.latitude == null
    || schoolInfo.longitude == null
  ) {
    return null;
  }

  return (
    <Section id="distance">
      <h2 className={styles.sectionTitle}>How far away are you?</h2>
      <p className={styles.sectionSubtitle}>
        Check your postcode against the furthest home offered a place in
        September {admissionDistance.year}.
      </p>
      <CutoffMapPanel schoolInfo={schoolInfo} cutoff={admissionDistance} />
    </Section>
  );
}