school_compare/nextjs-app/components/SchoolCard.tsx

/**
 * SchoolCard Component
 * Displays school information with metrics and actions
 */

import Link from 'next/link';
import type { School } from '@/lib/types';
import { formatPercentage, formatProgress, calculateTrend, getTrendColor } from '@/lib/utils';
import styles from './SchoolCard.module.css';

interface SchoolCardProps {
  school: School;
  onAddToCompare?: (school: School) => void;
  showDistance?: boolean;
  distance?: number;
  isInCompare?: boolean;
}

export function SchoolCard({ school, onAddToCompare, showDistance, distance, isInCompare = false }: SchoolCardProps) {
  const trend = calculateTrend(school.rwm_expected_pct, school.prev_rwm_expected_pct);
  const trendColor = getTrendColor(trend);

  return (
    <div className={`${styles.card} ${isInCompare ? styles.cardInCompare : ''}`}>
      <div className={styles.header}>
        <h3 className={styles.title}>
          <Link href={`/school/${school.urn}`}>
            {school.school_name}
          </Link>
        </h3>
        {showDistance && distance !== undefined && (
          <span className={styles.distance}>
            {(distance / 1.60934).toFixed(1)} miles away
          </span>
        )}
      </div>

      <div className={styles.meta}>
        {school.local_authority && (
          <span className={styles.metaItem}>{school.local_authority}</span>
        )}
        {school.school_type && (
          <span className={styles.metaItem}>{school.school_type}</span>
        )}
        {school.religious_denomination && school.religious_denomination !== 'Does not apply' && (
          <span className={styles.metaItem}>{school.religious_denomination}</span>
        )}
      </div>

      {(school.rwm_expected_pct !== null || school.reading_progress !== null) && (
        <div className={styles.metrics}>
          {school.rwm_expected_pct !== null && (
            <div className={styles.metric}>
              <span className={styles.metricLabel} title="Percentage of pupils achieving the expected standard in Reading, Writing, and Maths">
                RWM Expected
                <svg className="info-icon" style={{ marginLeft: '4px', width: '10px', height: '10px', verticalAlign: 'middle', color: 'var(--text-muted)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
              </span>
              <div className={styles.metricValue}>
                <strong>{formatPercentage(school.rwm_expected_pct)}</strong>
                {school.prev_rwm_expected_pct !== null && (
                  <span
                    className={`${styles.trend} ${styles[`trend${trend.charAt(0).toUpperCase() + trend.slice(1)}`]}`}
                    title={`Previous year: ${formatPercentage(school.prev_rwm_expected_pct)}`}
                  >
                    {trend === 'up' && (
                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
                        <path
                          d="M8 3L14 10H2L8 3Z"
                          fill="currentColor"
                        />
                      </svg>
                    )}
                    {trend === 'down' && (
                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
                        <path
                          d="M8 13L2 6H14L8 13Z"
                          fill="currentColor"
                        />
                      </svg>
                    )}
                    {trend === 'stable' && (
                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
                        <rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
                      </svg>
                    )}
                  </span>
                )}
              </div>
            </div>
          )}

          {school.reading_progress !== null && (
            <div className={styles.metric}>
              <span className={styles.metricLabel} title="Progress score from KS1 to KS2 in Reading. >0 is above average.">
                Reading
                <svg className="info-icon" style={{ marginLeft: '4px', width: '10px', height: '10px', verticalAlign: 'middle', color: 'var(--text-muted)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
              </span>
              <strong>{formatProgress(school.reading_progress)}</strong>
            </div>
          )}

          {school.writing_progress !== null && (
            <div className={styles.metric}>
              <span className={styles.metricLabel} title="Progress score from KS1 to KS2 in Writing. >0 is above average.">
                Writing
                <svg className="info-icon" style={{ marginLeft: '4px', width: '10px', height: '10px', verticalAlign: 'middle', color: 'var(--text-muted)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
              </span>
              <strong>{formatProgress(school.writing_progress)}</strong>
            </div>
          )}

          {school.maths_progress !== null && (
            <div className={styles.metric}>
              <span className={styles.metricLabel} title="Progress score from KS1 to KS2 in Maths. >0 is above average.">
                Maths
                <svg className="info-icon" style={{ marginLeft: '4px', width: '10px', height: '10px', verticalAlign: 'middle', color: 'var(--text-muted)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
              </span>
              <strong>{formatProgress(school.maths_progress)}</strong>
            </div>
          )}
        </div>
      )}

      <div className={styles.actions}>
        <Link href={`/school/${school.urn}`} className={styles.btnSecondary}>
          View Details
        </Link>
        {onAddToCompare && (
          <button
            onClick={() => onAddToCompare(school)}
            className={`${styles.btnPrimary} ${isInCompare ? styles.btnAdded : ''}`}
            disabled={isInCompare}
          >
            {isInCompare ? 'Added ✓' : 'Add to Compare'}
          </button>
        )}
      </div>
    </div>
  );
}