import type { LucideIcon } from 'lucide-react'

function formatKw(powerW: number | null | undefined): string {
  if (powerW == null || Number.isNaN(powerW)) return '—'
  const kw = powerW / 1000
  return `${kw.toFixed(2)} kW`
}

type Props = {
  label: string
  powerW: number | null | undefined
  icon: LucideIcon
  /** např. border-l-amber-400 */
  borderClass: string
  /** např. text-amber-400 */
  iconClass: string
}

export function PowerFlowCard({ label, powerW, icon: Icon, borderClass, iconClass }: Props) {
  return (
    <div
      className={`flex items-center gap-4 rounded-xl border border-slate-800 bg-slate-900/60 p-4 pl-3 shadow-sm backdrop-blur-sm border-l-4 ${borderClass}`}
    >
      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
        <Icon className={`h-6 w-6 ${iconClass}`} aria-hidden />
      </div>
      <div className="min-w-0 flex-1">
        <p className="text-xs font-medium uppercase tracking-wide text-slate-500">{label}</p>
        <p className="truncate text-xl font-semibold tabular-nums text-slate-100">{formatKw(powerW)}</p>
      </div>
    </div>
  )
}
