import React from 'react';

export function DetailParamSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section className="vm-model-param-section">
      <h3 className="vm-model-param-section-title">{title}</h3>
      {children}
    </section>
  );
}

export function DetailParamField({
  label,
  value,
  wide = false,
  empty = false,
  actionable = false,
}: {
  label: string;
  value: React.ReactNode;
  wide?: boolean;
  empty?: boolean;
  actionable?: boolean;
}) {
  return (
    <div
      className={[
        'vm-model-param-item',
        wide ? 'vm-model-param-item--wide' : '',
        actionable ? 'vm-model-param-item--actionable' : '',
      ].filter(Boolean).join(' ')}
    >
      <span className="vm-model-param-label">{label}</span>
      <div className={`vm-model-param-value${empty ? ' is-empty' : ''}`}>{value}</div>
    </div>
  );
}
