school_compare/nextjs-app/components/ComparisonToast.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useComparison } from '@/hooks/useComparison';
import { usePathname } from 'next/navigation';
import styles from './ComparisonToast.module.css';

export function ComparisonToast() {
  const { selectedSchools, clearAll, removeSchool } = useComparison();
  const [mounted, setMounted] = useState(false);
  const [collapsed, setCollapsed] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  // Don't show toast on the compare page itself
  if (pathname === '/compare') return null;

  if (selectedSchools.length === 0) return null;

  return (
    <div className={styles.toastContainer}>
      <div className={`${styles.toastContent} ${collapsed ? styles.toastCollapsed : ''}`}>
        <div className={styles.toastHeader}>
          <span className={styles.toastTitle}>
            <span className={styles.toastBadge}>{selectedSchools.length}</span>
            {selectedSchools.length === 1 ? 'school' : 'schools'} selected
          </span>
          <button
            onClick={() => setCollapsed(!collapsed)}
            className={styles.collapseBtn}
            aria-label={collapsed ? 'Expand comparison panel' : 'Minimize comparison panel'}
          >
            <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
              {collapsed ? (
                <path d="M4 10L8 6L12 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              ) : (
                <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              )}
            </svg>
          </button>
        </div>
        {!collapsed && (
          <>
            <div className={styles.schoolList}>
              {selectedSchools.map(school => (
                <div key={school.urn} className={styles.schoolItem}>
                  <span className={styles.schoolName} title={school.school_name}>
                    {school.school_name.length > 28 ? school.school_name.slice(0, 28) + '…' : school.school_name}
                  </span>
                  <button
                    onClick={() => removeSchool(school.urn)}
                    className={styles.removeSchoolBtn}
                    aria-label={`Remove ${school.school_name}`}
                  >×</button>
                </div>
              ))}
            </div>
            <div className={styles.toastActions}>
              <button onClick={clearAll} className={styles.btnClearAll}>Clear all</button>
              <Link href="/compare" className={styles.btnCompare}>Compare Now</Link>
            </div>
          </>
        )}
      </div>
    </div>
  );
}