import { Field } from "formik";

type PayloadOptionsToggleProps = {
  label: string;
  value: string;
};

const PayloadOptionsToggle = ({ label, value }: PayloadOptionsToggleProps) => {
  return (
    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
      <span className="text-lg">{label}</span>
      <Field id={value} type="checkbox" name={value} className="sr-only peer" />
      <div
        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
         after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
         after:duration-300 peer-checked:after:translate-x-5"
      />
    </label>
  );
};

export default PayloadOptionsToggle;