interface Props {
  title: string
  value: string | number
  sub?: string
  icon: string
  color?: string
  trend?: { val: number; up: boolean }
  onClick?: () => void
}

/* Variant 스타일 StatCard — screenshot9 카드 패턴 적용 */
export function StatCard({ title, value, sub, icon, color = '#E8F0F8', trend, onClick }: Props) {
  return (
    <div
      onClick={onClick}
      style={{
        background: '#ffffff',
        border: '1px solid #E2E8F0',
        borderTop: '3px solid #00A0C8',   /* 상단 시안 바 */
        borderRadius: 12,
        padding: '20px 22px',
        cursor: onClick ? 'pointer' : 'default',
        transition: 'all .2s',
        boxShadow: '0 2px 8px rgba(0,51,102,.06)',
      }}
      onMouseEnter={e => {
        const el = e.currentTarget as HTMLDivElement
        el.style.boxShadow = '0 8px 24px rgba(0,51,102,.12)'
        el.style.transform = 'translateY(-2px)'
      }}
      onMouseLeave={e => {
        const el = e.currentTarget as HTMLDivElement
        el.style.boxShadow = '0 2px 8px rgba(0,51,102,.06)'
        el.style.transform = 'translateY(0)'
      }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
        {/* 아이콘 박스 — screenshot9 연파랑 박스 스타일 */}
        <div style={{
          width: 48, height: 48, borderRadius: 10,
          background: '#E8F0F8',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22, flexShrink: 0,
        }}>{icon}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#00A0C8',
            letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 4 }}>
            {title}
          </div>
          <div style={{ fontSize: 28, fontWeight: 800, lineHeight: 1.1,
            color: '#003366', letterSpacing: '-.02em' }}>
            {value}
          </div>
          {sub && <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 3 }}>{sub}</div>}
        </div>
      </div>
      {trend && (
        <div style={{
          marginTop: 12, fontSize: 12, fontWeight: 600,
          color: trend.up ? '#16a34a' : '#dc2626',
          display: 'flex', alignItems: 'center', gap: 4,
        }}>
          {trend.up ? '▲' : '▼'} {Math.abs(trend.val)}% 전주 대비
        </div>
      )}
    </div>
  )
}
