import React from "react";
import * as Switch from "@radix-ui/react-switch";

const Toggle = ({
  label,
  name,
  required = false,
  onChange,
  onboardingData,
}) => {
  return (
    <div className="flex items-center space-x-4">
      <Switch.Root
        className="w-[42px] h-[25px] bg-gray-300 rounded-full relative data-[state=checked]:bg-primary outline-none cursor-pointer"
        id={name}
        name={name}
        checked={onboardingData?.[name] || false}
        onCheckedChange={(checked) =>
          onChange({ target: { name, checked } }, "checkbox")
        }
      >
        <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
      </Switch.Root>
      <label className="text-sm" htmlFor={name}>
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>
    </div>
  );
};

export default Toggle;