import React from "react";
import { Form } from "react-bootstrap";
import "./Inputfield.css";
export default function InputField({
  type,
  lable,
  bottomlable,
  as,
  height,
  width,
  placeholder,
  value,
  onChange,
  required,
}) {
  return (
    <>
      {required ? (
        <label
          style={{ fontFamily: "light", fontSize: "16px" }}
          className="align-items-center">
          <span
            style={{
              color: "red",
              fontSize: "22px",

              position: "absolute",
            }}>
            *
          </span>
          <span style={{ paddingLeft: "15px" }}>{lable}</span>
        </label>
      ) : (
        <>
          {lable && (
            <label
              style={{ fontFamily: "light", fontSize: "16px" }}
              className="align-items-center">
              {lable}
            </label>
          )}
        </>
      )}

      <Form.Control
        id="floatingInputCustom"
        type={type}
        placeholder={placeholder}
        as={as}
        style={{
          height,
          width,
          borderRadius: "2px",
          paddingTop: "15px",
          paddingBottom: "15px",
        }}
        className=" mt-2  mb-2"
        value={value}
        onChange={onChange}
      />
    </>
  );
}
