/**
 * SchoolLifeSection — absence figures. Primary pages only; the secondary page
 * carries the equivalent content inside WellbeingSection.
 *
 * Server component.
 */

import type { AbsenceData } from '@/lib/types';
import { formatPercentage } from '@/lib/utils';
import { MetricTooltip } from '../MetricTooltip';
import { Section, sectionStyles as styles } from './sectionShared';

export function SchoolLifeSection({
  absenceData,
  primaryAvg,
}: {
  absenceData: AbsenceData | null;
  primaryAvg: Record<string, number>;
}) {
  return (
    <Section id="school-life">
      <h2 className={styles.sectionTitle}>School Life</h2>
      <div className={styles.metricsGrid}>
        {absenceData?.overall_absence_rate != null && (
          <div className={styles.metricCard}>
            <div className={styles.metricLabel}>
              Days missed (overall absence)
              <MetricTooltip metricKey="overall_absence_pct" />
            </div>
            <div className={styles.metricValue}>{formatPercentage(absenceData.overall_absence_rate)}</div>
            {primaryAvg.overall_absence_pct != null && (
              <div className={styles.metricHint}>England avg: ~{primaryAvg.overall_absence_pct.toFixed(1)}%</div>
            )}
          </div>
        )}
        {absenceData?.persistent_absence_rate != null && (
          <div className={styles.metricCard}>
            <div className={styles.metricLabel}>
              Regularly missing school
              <MetricTooltip metricKey="persistent_absence_pct" />
            </div>
            <div className={styles.metricValue}>{formatPercentage(absenceData.persistent_absence_rate)}</div>
            {primaryAvg.persistent_absence_pct != null && (
              <div className={styles.metricHint}>England avg: ~{primaryAvg.persistent_absence_pct.toFixed(0)}%</div>
            )}
          </div>
        )}
      </div>
    </Section>
  );
}