import { Field, useFormikContext } from "formik";
import FormToggle from "../components/FormToggle";
import FormGroup from "../components/FormGroup";
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";

const BearerTypeFields = () => {
  useFormikContext<BearerTypeFieldType & InitialValuesForm>();

  return (
    <div className="flex flex-col space-y-4 px-2">
      <FormGroup>
        <label htmlFor="format">Format</label>
        <Field
          as="select"
          name="format"
          id="format"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
        >
          <option key={"JSON"} value={"JSON"}>
            JSON
          </option>
          <option key={"BOF2"} value={"BOF2"}>
            BOF2
          </option>
        </Field>
      </FormGroup>
      <FormGroup>
        <div className="flex flex-col space-y-4">
          <FormToggle name="enabled" label="Enabled" />
        </div>
      </FormGroup>
    </div>
  );
};

export default BearerTypeFields;
