import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

type InfoFieldProps = {
  label: string;
  /** 단순 텍스트 값. 커스텀 마크업이 필요하면 value 대신 children 을 쓴다. */
  value?: ReactNode;
  children?: ReactNode;
  className?: string;
  labelClassName?: string;
  valueClassName?: string;
  title?: string;
};

/** 헤더 카드의 `라벨 / 값` 한 칸. (드로어 곳곳에서 ~20회 반복되던 패턴) */
export function InfoField({
  label,
  value,
  children,
  className,
  labelClassName,
  valueClassName,
  title,
}: InfoFieldProps) {
  return (
    <div className={className}>
      <span className={cn('text-[10px] block opacity-70', labelClassName)}>{label}</span>
      {children ?? (
        <span className={cn('text-foreground font-semibold', valueClassName)} title={title}>
          {value}
        </span>
      )}
    </div>
  );
}