'use client';

import { useState, type ReactNode } from 'react';
import styles from './schoolSections.module.css';

/**
 * The only interactive part of the primary admissions section, and the only
 * client component in components/school/.
 *
 * Both views are always present in the DOM and visibility is toggled with the
 * `hidden` attribute — matching the previous behaviour exactly — so the
 * server-rendered markup passed in as yearView/trendView never ships as client
 * JavaScript.
 *
 * It spans the header and the viewport because the segmented control sits
 * inside .admissionsHeader beside the <h2> while the viewport is a sibling
 * below it; wrapping only one would change the DOM the CSS depends on.
 */
export function AdmissionsViewToggle({
  title,
  subtitle,
  trendLabel,
  yearView,
  trendView,
}: {
  title: ReactNode;
  subtitle: ReactNode;
  trendLabel: string;
  yearView: ReactNode;
  trendView: ReactNode;
}) {
  const [view, setView] = useState<'year' | 'trend'>('year');

  return (
    <>
      <div className={styles.admissionsHeader}>
        <h2 className={styles.sectionTitle}>{title}</h2>
        <div className={styles.admissionsSeg} role="group" aria-label="Admissions view">
          <button type="button" aria-pressed={view === 'year'} onClick={() => setView('year')}>
            This year
          </button>
          <button type="button" aria-pressed={view === 'trend'} onClick={() => setView('trend')}>
            {trendLabel}
          </button>
        </div>
      </div>
      {subtitle}
      <div className={styles.admissionsViewport}>
        <div className={styles.admissionsViewYear} hidden={view !== 'year'}>
          {yearView}
        </div>
        <div className={styles.admissionsViewTrend} hidden={view !== 'trend'}>
          {trendView}
        </div>
      </div>
    </>
  );
}