import { memo } from 'react'
import { cn } from '@/lib/utils'

interface InfoRowProps {
  label: string
  value: string
  /** 追加到 value 上的类（如截断宽度） */
  valueClass?: string
}

/**
 * 信息行 — 标签/值 两栏展示。
 * 原先在 Clusters/Hosts/Deployments/Collectors/Storage 五个页面各复制一份，
 * 第三次复用时晋升为全局组件（三次法则，见开发标准 02 章）。
 */
export const InfoRow = memo(function InfoRow({ label, value, valueClass }: InfoRowProps) {
  return (
    <div className="flex justify-between">
      <span>{label}</span>
      <span className={cn('font-medium text-foreground', valueClass)}>
        {value}
      </span>
    </div>
  )
})

export default InfoRow