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

/**
 * SecondaryHistorySection — results over time. Secondary pages.
 * Server component.
 */

import type { School, SchoolResult, NationalAverages } from '@/lib/types';
import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
import { Section, sectionStyles as styles } from './sectionShared';
import { PerformanceChart } from './charts';


export function SecondaryHistorySection({
  yearlyData, schoolInfo, nationalAvg, secondaryAvg, suppressComparison,
}: {
  yearlyData: SchoolResult[];
  schoolInfo: School;
  nationalAvg: NationalAverages | null;
  secondaryAvg: Record<string, number>;
  suppressComparison: boolean;
}) {
  // National Attainment 8 baseline for the "Results Over Time" chart.
  const heroAtt8Nat = secondaryAvg.attainment_8_score ?? null;

  return (
    <section id="history" className={styles.card}>
      <h2 className={styles.sectionTitle}>Historical Results</h2>
      {yearlyData.length > 0 && (
        <>
          <h3 className={styles.subSectionTitle} style={{ marginTop: '1.25rem' }}>Results Over Time</h3>
          <div className={styles.chartContainer}>
            <PerformanceChart
              data={yearlyData}
              schoolName={schoolInfo.school_name}
              isSecondary={true}
              nationalAtt8Avg={suppressComparison ? null : heroAtt8Nat}
              nationalByYear={suppressComparison ? undefined : nationalAvg?.by_year}
            />
          </div>
        </>
      )}
      <details className={styles.historyDisclosure}>
        <summary className={styles.historyToggle}>View raw year-by-year data</summary>
        <div className={styles.tableWrapper}>
          <table className={styles.dataTable}>
            <thead>
              <tr>
                <th>Year</th>
                <th>Attainment 8</th>
                <th>Progress 8</th>
                <th>Eng &amp; Maths 4+</th>
                <th>EBacc entry %</th>
              </tr>
            </thead>
            <tbody>
              {yearlyData.map((result) => (
                <tr key={result.year}>
                  <td className={styles.yearCell}>{formatAcademicYear(result.year)}</td>
                  <td>{result.attainment_8_score != null ? result.attainment_8_score.toFixed(1) : '-'}</td>
                  <td>{result.progress_8_score != null ? formatProgress(result.progress_8_score) : '-'}</td>
                  <td>{result.english_maths_standard_pass_pct != null ? formatPercentage(result.english_maths_standard_pass_pct) : '-'}</td>
                  <td>{result.ebacc_entry_pct != null ? formatPercentage(result.ebacc_entry_pct) : '-'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </details>
    </section>
  );
}