import styles from './StatCard.module.css'
import { Sparkline } from '../Sparkline/Sparkline'
import type { ReactNode } from 'react'

interface StatCardProps {
  label: string
  value: ReactNode
  detail?: ReactNode
  trend?: 'up' | 'down' | 'neutral'
  trendValue?: string
  accent?: 'amber' | 'success' | 'warning' | 'error' | 'running'
  sparkline?: number[]
  className?: string
}

const TREND_ICONS = {
  up: '↑',
  down: '↓',
  neutral: '→',
}

export function StatCard({
  label,
  value,
  detail,
  trend,
  trendValue,
  accent = 'amber',
  sparkline,
  className,
}: StatCardProps) {
  return (
    <div className={`${styles.card} ${styles[`accent-${accent}`]} ${className ?? ''}`}>
      <div className={styles.header}>
        <span className={styles.label}>{label}</span>
        {sparkline && <Sparkline data={sparkline} className={styles.sparkline} />}
      </div>
      <div className={styles.valueRow}>
        <span className={styles.value}>{value}</span>
        {trend && trendValue && (
          <span className={`${styles.trend} ${styles[trend]}`}>
            {TREND_ICONS[trend]} {trendValue}
          </span>
        )}
      </div>
      {detail && <div className={styles.detail}>{detail}</div>}
    </div>
  )
}
