'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 } = useComparison();
  const [mounted, setMounted] = 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}>
        <div className={styles.toastInfo}>
          <span className={styles.toastBadge}>{selectedSchools.length}</span>
          <span className={styles.toastText}>
            {selectedSchools.length === 1 ? 'school' : 'schools'} selected
          </span>
        </div>
        <div className={styles.toastActions}>
          <button onClick={clearAll} className={styles.btnClear}>
            Clear
          </button>
          <Link href="/compare" className={styles.btnCompare}>
            Compare Now
          </Link>
        </div>
      </div>
    </div>
  );
}