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

'use client';

/**
 * The selection count and the one decisive action in the section.
 *
 * The CTA is a real link, not a handler: /compare already parses `urns` from
 * the query string, so the hand-off needs no new compare plumbing. It counts
 * this school plus whatever the reader ticked, because comparing a shortlist
 * without the school they are looking at is not what they asked for.
 */

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

export function NearbySchoolsCompareBar({
  thisUrn,
  candidates,
}: {
  thisUrn: number;
  candidates: NearbySchool[];
}) {
  const { selectedSchools } = useComparisonContext();

  // Only the schools this section offers, in the order the cards show them —
  // the basket may hold schools picked up elsewhere on the site, and this bar
  // speaks for this section.
  const offered = candidates
    .map((c) => c.urn)
    .filter((urn) => selectedSchools.some((s) => s.urn === urn));

  const count = offered.length;
  const href = `/compare?urns=${[thisUrn, ...offered].join(',')}`;

  return (
    <div className={styles.footer}>
      <p aria-live="polite">
        <strong>
          {count
            ? `${count} school${count === 1 ? '' : 's'} selected`
            : 'Compare side by side'}
        </strong>
        {count
          ? 'This school is included automatically.'
          : 'Add a school to compare it with this one.'}
      </p>
      {count ? (
        <Link className={styles.compare} href={href}>
          Compare {count + 1} schools →
        </Link>
      ) : (
        <span className={styles.compare} aria-disabled="true">
          Compare →
        </span>
      )}
    </div>
  );
}