import { motion } from 'framer-motion';
import styles from './KpiHero.module.css';

interface Kpi {
  label: string;
  value: string;
  delta?: string;
  deltaPositive?: boolean;
  sublabel?: string;
}

interface KpiHeroProps {
  kpis?: Kpi[];
  isLoading: boolean;
}

const DEFAULT_KPIS: Kpi[] = [
  { label: 'Active Leads', value: '—', sublabel: 'in pipeline' },
  { label: 'Site Visits', value: '—', sublabel: 'this month' },
  { label: 'Revenue Pipeline', value: '—', sublabel: 'projected' },
];

/**
 * KpiHero
 * Three primary KPIs rendered in large, confident typography.
 * Stagger-animates on mount. Delta shown with directional color.
 */
export function KpiHero({ kpis = DEFAULT_KPIS, isLoading }: KpiHeroProps) {
  return (
    <div className={styles.grid}>
      {kpis.map((kpi, i) => (
        <motion.div
          key={kpi.label}
          className={`${styles.card} glass-card`}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: i * 0.08, duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
        >
          <span className={styles.label}>{kpi.label}</span>
          <div className={styles.valueRow}>
            {isLoading ? (
              <div className={`${styles.skeleton} shimmer`} />
            ) : (
              <span className={styles.value}>{kpi.value}</span>
            )}
            {kpi.delta && !isLoading && (
              <span
                className={styles.delta}
                style={{ color: kpi.deltaPositive ? 'var(--color-green)' : 'var(--color-red)' }}
              >
                {kpi.deltaPositive ? '↑' : '↓'} {kpi.delta}
              </span>
            )}
          </div>
          {kpi.sublabel && (
            <span className={styles.sublabel}>{kpi.sublabel}</span>
          )}
        </motion.div>
      ))}
    </div>
  );
}
