school_compare/nextjs-app/components/HomeView.tsx

/**
 * HomeView Component
 * Client-side home page view with search and filtering
 */

'use client';

import { useSearchParams } from 'next/navigation';
import { FilterBar } from './FilterBar';
import { SchoolCard } from './SchoolCard';
import { Pagination } from './Pagination';
import { EmptyState } from './EmptyState';
import { useComparisonContext } from '@/context/ComparisonContext';
import type { SchoolsResponse, Filters } from '@/lib/types';
import styles from './HomeView.module.css';

interface HomeViewProps {
  initialSchools: SchoolsResponse;
  filters: Filters;
}

export function HomeView({ initialSchools, filters }: HomeViewProps) {
  const searchParams = useSearchParams();
  const { addSchool } = useComparisonContext();

  const hasSearch = searchParams.get('search') || searchParams.get('postcode');
  const isLocationSearch = !!searchParams.get('postcode');

  return (
    <div className={styles.homeView}>
      {/* Hero Section */}
      <section className={styles.hero}>
        <h1 className={styles.heroTitle}>
          Compare Primary School Performance
        </h1>
        <p className={styles.heroDescription}>
          Search and compare KS2 results for thousands of schools across England
        </p>
      </section>

      {/* Search and Filters */}
      <FilterBar filters={filters} showLocationSearch />

      {/* Location Info Banner */}
      {isLocationSearch && initialSchools.location_info && (
        <div className={styles.locationBanner}>
          <span className={styles.locationIcon}>📍</span>
          <span>
            Showing schools within {initialSchools.location_info.radius}km of{' '}
            <strong>{initialSchools.location_info.postcode}</strong>
          </span>
        </div>
      )}

      {/* Results Section */}
      <section className={styles.results}>
        {!hasSearch && initialSchools.schools.length > 0 && (
          <div className={styles.sectionHeader}>
            <h2>Featured Schools</h2>
            <p className={styles.sectionDescription}>
              Explore schools from across England
            </p>
          </div>
        )}

        {hasSearch && (
          <div className={styles.resultsHeader}>
            <h2>
              {initialSchools.total.toLocaleString()} school
              {initialSchools.total !== 1 ? 's' : ''} found
            </h2>
          </div>
        )}

        {initialSchools.schools.length === 0 ? (
          <EmptyState
            title="No schools found"
            message="Try adjusting your search criteria or filters to find schools."
            action={{
              label: 'Clear Filters',
              onClick: () => {
                window.location.href = '/';
              },
            }}
          />
        ) : (
          <>
            <div className={styles.grid}>
              {initialSchools.schools.map((school) => (
                <SchoolCard
                  key={school.urn}
                  school={school}
                  onAddToCompare={addSchool}
                />
              ))}
            </div>

            {initialSchools.total_pages > 1 && (
              <Pagination
                currentPage={initialSchools.page}
                totalPages={initialSchools.total_pages}
                total={initialSchools.total}
              />
            )}
          </>
        )}
      </section>
    </div>
  );
}