import { cn } from "@/lib/utils";

interface LabelValueFieldProps {
  label: string;
  value: string;
  className?: string;
  labelClassName?: string;
  valueClassName?: string;
}

/**
 * Displays a label and value in a vertical stack.
 * Commonly used in profile pages and form displays.
 */
export function LabelValueField({
  label,
  value,
  className,
  labelClassName,
  valueClassName,
}: LabelValueFieldProps) {
  return (
    <div className={cn("flex flex-col gap-2 items-start flex-1", className)}>
      <p
        className={cn(
          "text-sm text-muted-foreground text-start",
          labelClassName
        )}
      >
        {label}
      </p>
      <p
        className={cn(
          "text-sm font-semibold text-foreground text-start",
          valueClassName
        )}
      >
        {value}
      </p>
    </div>
  );
}