import { Field, Textarea } from "@fluentui/react-components";

interface CommandFieldProps {
  label: string;
  value: string;
  onChange: (v: string) => void;
}

export function CommandField({ label, value, onChange }: CommandFieldProps): React.JSX.Element {
  return (
    <Field label={label}>
      <Textarea
        value={value}
        onChange={(_e, d) => { onChange(d.value); }}
        rows={value.split("\n").length + 1}
        style={{ fontFamily: "monospace", width: "100%" }}
        placeholder={`${label} command(s)`}
      />
    </Field>
  );
}