interface DataPointProps {
  label: string
  value: string
  unit?: string
  className?: string
}

export function DataPoint({ label, value, unit, className = '' }: DataPointProps) {
  return (
    <div className={`flex flex-col ${className}`}>
      <span className="text-xs font-normal text-neutral-400 mb-1">
        {label}
      </span>
      <span className="text-2xl sm:text-3xl font-medium text-neutral-50 tracking-tight flex items-baseline">
        {value}
        {unit && (
          <span className="text-xs font-normal text-brand-blue ml-1.5">{unit}</span>
        )}
      </span>
    </div>
  )
}