import React from "react";

import { FieldInput, FieldLabel, FieldWrapper } from "./field.style";

export const InputField = ({ id, placeHolder, value, label, onChange, inputRef }) => {
  return (
    <FieldWrapper>
      <FieldLabel htmlFor={id}>
        {label}
      </FieldLabel>
      <FieldInput ref={inputRef} id={id} type="text" placeholder={placeHolder} value={value} onChange={onChange} />
    </FieldWrapper>
  );
};

InputField.defaultProps = {
  id: `input-${(Math.random() * 10).toString()}`,
};