import type { ComponentType } from 'react'

type IconType = ComponentType<{ size?: number; stroke?: number; className?: string }>

export type StatTileTone = 'default' | 'success' | 'cool' | 'amber' | 'error'

export interface StatTileData {
  icon: IconType
  label: string
  value: string
  tone?: StatTileTone
}

interface Props {
  tile: StatTileData
}

/**
 * A small "icon + label + value" card used in stat grids (Series Stats,
 * Tech Specs, anywhere else summary numeric data needs visual interest).
 */
export default function StatTile({ tile }: Props) {
  const Icon = tile.icon
  const iconCls =
    tile.tone === 'success' ? 'bg-success/10 text-success ring-success/20'
    : tile.tone === 'cool' ? 'bg-cool/10 text-cool ring-cool/25'
    : tile.tone === 'amber' ? 'bg-accent/12 text-accent ring-accent/25'
    : tile.tone === 'error' ? 'bg-error/10 text-error ring-error/25'
    : 'bg-glass-light text-text-2 ring-border'
  return (
    <div className="group relative flex items-center gap-3 rounded-lg p-3 bg-elevated/30 border border-border hover:border-border-hover hover:bg-elevated/50 transition-colors min-w-0">
      <span className={`shrink-0 w-9 h-9 rounded-md grid place-items-center ring-1 ${iconCls}`}>
        <Icon size={16} stroke={1.75} />
      </span>
      <div className="min-w-0">
        <p className="text-[10px] uppercase tracking-[0.14em] font-semibold text-text-3 mb-0.5 leading-none truncate">
          {tile.label}
        </p>
        <p className="text-[15px] text-text-1 font-bold tracking-tight tabular-nums font-display truncate leading-tight">
          {tile.value}
        </p>
      </div>
    </div>
  )
}
