import { Field } from "formik";
import FormGroup from "../components/FormGroup";
import FormToggle from "../components/FormToggle";

const OverviewTextFields = () => {
  return (
    <div className="flex flex-col space-y-2 px-2">
      <FormGroup>
        <label htmlFor="overviewQuality">Include VRM</label>
        <FormToggle name="includeVRM" />
      </FormGroup>
      <FormGroup>
        <label htmlFor="includeMotion">Include Motion</label>
        <FormToggle name="includeMotion" />
      </FormGroup>

      <FormGroup>
        <label htmlFor="includeCameraName">Include Camera Name</label>
        <FormToggle name="includeCameraName" />
      </FormGroup>
      <FormGroup>
        <label htmlFor="includeTimestamp">Include Timestamp</label>
        <FormToggle name="includeTimestamp" />
      </FormGroup>
      <FormGroup>
        <label htmlFor="">Timestamp Format</label>
        <Field
          as="select"
          name="timestampFormat"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
        >
          <option value={"UTC"}>UTC</option>
          <option value={"LOCAL"}>Local</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="overlayPosition">Overlay Position</label>
        <Field
          as="select"
          name="overlayPosition"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
        >
          <option value={"Top"}>Top</option>
          <option value={"Bottom"}>Bottom</option>
        </Field>
      </FormGroup>
    </div>
  );
};

export default OverviewTextFields;