'use client'

import type { LucideIcon } from 'lucide-react'

interface StatProps {
  label: string
  value: string | number
  detail: string
  icon: LucideIcon
  accent: string
}

export function Stat({ label, value, detail, icon: Icon, accent }: StatProps) {
  return (
    <div className="stat-card">
      <div className="stat-top">
        <span>{label}</span>
        <div className={`stat-icon ${accent}`}>
          <Icon size={17} />
        </div>
      </div>
      <strong>{value}</strong>
      <small>{detail}</small>
    </div>
  )
}