import classNames from 'classnames';
import { v4 } from 'uuid';
interface InputProps {
  disabled?: boolean;
  label?: string;
  value: string;
  className?: string;
  children?: React.ReactNode;
  onChange: (value: string) => void;
}

export default function Input({
  disabled,
  label,
  value,
  className,
  children,
  onChange,
}: InputProps) {
  const id = label ? label.toLowerCase().replace(' ', '-') : v4();
  return (
    <div className={classNames('botfoundry-input', className)}>
      {label ? (
        <label className="botfoundry-label" htmlFor={id}>
          {label}
        </label>
      ) : null}
      {children ? (
        children
      ) : className === 'extra-large-input' ? (
        <textarea
          id={id}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
        />
      ) : (
        <input
          id={id}
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
        />
      )}
    </div>
  );
}