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

'use client';

/**
 * The per-card basket toggle.
 *
 * The links around it are server-rendered, so the section works with JS off;
 * this adds the basket interaction on top rather than being what makes the
 * section function.
 */

import { useComparisonContext } from '@/context/ComparisonContext';
import type { School, NearbySchool } from '@/lib/types';
import styles from './NearbySchools.module.css';

export function AddToCompareButton({ school }: { school: NearbySchool }) {
  const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
  const selected = selectedSchools.some((s) => s.urn === school.urn);

  const toggle = () => {
    if (selected) {
      removeSchool(school.urn);
      return;
    }
    // The basket only needs identity and display fields; the compare page
    // fetches everything it renders by URN.
    addSchool({
      urn: school.urn,
      school_name: school.school_name,
      school_type: school.school_type,
      age_range: school.age_range,
      // The basket limits each phase separately. Missing (an older API)
      // counts against both groups, which is safe, just stricter.
      phase: school.phase ?? null,
    } as School);
  };

  return (
    <button
      type="button"
      className={styles.add}
      onClick={toggle}
      aria-pressed={selected}
    >
      {selected ? '✓ Added to compare' : '+ Add to compare'}
      <span className={styles.srOnly}>: {school.school_name}</span>
    </button>
  );
}