interface StatCardProps {
  title: string
  value: string
  prefix?: string
  suffix?: string
  description?: string
  valueColor?: string
}

function StatCard({ title, value, prefix, suffix, description, valueColor }: StatCardProps) {
  return (
    <div className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
      <p className="mb-1 text-xs font-medium text-gray-400">{title}</p>
      <p className="text-2xl font-bold tracking-tight text-gray-800" style={valueColor ? { color: valueColor } : undefined}>
        {prefix && <span className="text-base font-medium text-gray-500">{prefix}</span>}
        {value}
        {suffix && <span className="ml-0.5 text-sm font-medium text-gray-400">{suffix}</span>}
      </p>
      {description && <p className="mt-1 text-xs text-gray-400">{description}</p>}
    </div>
  )
}

export { StatCard, type StatCardProps }
