/**
 * LocalAreaSection — IDACI deprivation decile. Primary pages only.
 *
 * Server component.
 */

import type { SchoolDeprivation } from '@/lib/types';
import { MetricTooltip } from '../MetricTooltip';
import { Section, sectionStyles as styles } from './sectionShared';

// Moved with this section from SchoolDetailView, its only consumer.
function deprivationDesc(decile: number) {
  if (decile <= 3) return `This school is in one of England's most deprived areas (decile ${decile}/10). Many pupils may face additional challenges at home.`;
  if (decile <= 7) return `This school is in an area with average levels of deprivation (decile ${decile}/10).`;
  return `This school is in one of England's less deprived areas (decile ${decile}/10).`;
}

export function LocalAreaSection({ deprivation }: { deprivation: SchoolDeprivation }) {
  return (
    <Section id="local-area">
      <h2 className={styles.sectionTitle}>
        Local Area Context
        <MetricTooltip metricKey="idaci_decile" />
      </h2>
      <div className={styles.deprivationDots}>
        {Array.from({ length: 10 }, (_, i) => (
          <div
            key={i}
            className={`${styles.deprivationDot} ${i < deprivation.idaci_decile! ? styles.deprivationDotFilled : ''}`}
            title={`Decile ${i + 1}`}
          />
        ))}
      </div>
      <div className={styles.deprivationScaleLabel}>
        <span>Most deprived</span>
        <span>Least deprived</span>
      </div>
      <p className={styles.deprivationDesc}>{deprivationDesc(deprivation.idaci_decile!)}</p>
    </Section>
  );
}