import React from 'react';

interface DataLabelProps {
  value: number | string;
  label?: string;
  unit?: string;
  className?: string;
}

const DataLabel: React.FC<DataLabelProps> = ({
  value,
  label,
  unit,
  className = ''
}) => {
  return (
    <div className={`flex flex-col items-center ${className}`}>
      {/* 装饰元素 */}
      <div className="w-2 h-2 bg-blue-400 rounded-full mb-1" />

      {/* 数值显示 */}
      <div className="text-lg font-bold text-white drop-shadow-sm">
        {typeof value === 'number' ? value.toLocaleString() : value}
        {unit && <span className="text-sm ml-1">{unit}</span>}
      </div>

      {/* 标签 */}
      {label && (
        <div className="text-xs text-white/70 mt-1">
          {label}
        </div>
      )}
    </div>
  );
};

export default DataLabel;