import { Field } from "formik";

type ChannelFieldsProps = {
  format: string;
};

const ChannelFields = ({ format }: ChannelFieldsProps) => {
  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="flex flex-row justify-between">
        <label htmlFor="backoffice" className="block mb-2 font-medium">
          Back Office URL
        </label>
        <Field
          name={"backOfficeURL"}
          type="text"
          id="backoffice"
          placeholder="https://www.backoffice.com"
          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
        />
      </div>
      <div className="flex flex-row justify-between">
        <label htmlFor="username" className="block mb-2 font-medium">
          Username
        </label>
        <Field
          name={"username"}
          type="text"
          id="username"
          placeholder="Back office username"
          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
        />
      </div>
      <div className="flex flex-row justify-between">
        <label htmlFor="password">Password</label>
        <Field
          name={"password"}
          type={"password"}
          id="password"
          placeholder="Back office password"
          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
        />
      </div>
      <div className="flex flex-row justify-between">
        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
        <Field
          name={"readTimeoutSeconds"}
          type="number"
          id="readTimeoutSeconds"
          placeholder="https://example.com"
          className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
        />
      </div>
      <div className="flex flex-row justify-between">
        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
        <Field
          name={"connectTimeoutSeconds"}
          type="number"
          id="connectTimeoutSeconds"
          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
        />
      </div>
    </div>
  );
};

export default ChannelFields;