import * as Icons from "lucide-react"
import { hexToRgbA } from "./planHelpers"

export function StatCard({ label, value = "—", Icon = Icons.Info, accent, className = "", title }: {
  label: string
  value?: React.ReactNode
  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
  accent?: string | null
  className?: string
  title?: string
}) {
  const border = hexToRgbA(accent, .28)
  const chipBg = hexToRgbA(accent, .08)
  const glow = hexToRgbA(accent, .14)

  return (
    <div
      className={`group relative overflow-hidden rounded-2xl border p-4 sm:p-5 bg-white/70 dark:bg-neutral-900/60 backdrop-blur shadow-sm hover:shadow-md transition-all ${className}`}
      style={{ borderColor: border }}
      title={title ?? (typeof value === "string" ? value : undefined)}
      aria-label={`${label}: ${typeof value === "string" ? value : ""}`}
    >
      <div className="flex items-center justify-between gap-3">
        <div className="text-xs text-neutral-500">{label}</div>
        <span className="inline-flex items-center justify-center rounded-xl px-2.5 py-2 border" style={{ borderColor: border, background: chipBg }}>
          <Icon className="h-4 w-4 opacity-80" />
        </span>
      </div>
      <div className="mt-1 text-2xl font-semibold tabular-nums tracking-tight truncate">{value}</div>
      <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" style={{ background: `radial-gradient(600px 120px at 20% -10%, ${glow}, transparent 60%)` }} />
    </div>
  )
}