import { ensureFieldCss } from './Input.jsx';

export function Textarea({ label, required, placeholder, value, defaultValue, onChange, minHeight = 72, danger, style }) {
  ensureFieldCss();
  const ctrl = (
    <textarea className="m-input" placeholder={placeholder} value={value} defaultValue={defaultValue}
      style={{ resize: 'vertical', minHeight, width: '100%', ...(danger ? { borderColor: 'var(--red-dim)' } : {}), ...style }}
      onChange={onChange ? (e) => onChange(e.target.value) : undefined} readOnly={value !== undefined && !onChange} />
  );
  if (!label) return ctrl;
  return (
    <label className="m-label" style={{ width: '100%' }}>
      <span>{label}{required ? <span className="m-req"> *</span> : null}</span>
      {ctrl}
    </label>
  );
}