import React from "react";
import clsx from "clsx";

interface SwitchProps {
  checked: boolean;
  onChange: (value: boolean) => void;

  disabled?: boolean;
  id?: string;
  className?: string;
}

const Switch: React.FC<SwitchProps> = ({
  checked,
  onChange,
  disabled = false,
  id,
  className,
}) => {
  return (
    <label
      className={clsx(
        "w-12 h-6 relative inline-flex items-center",
        disabled && "opacity-50 cursor-not-allowed",
        className
      )}
    >
      <input
        id={id}
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange(e.target.checked)}
        className="absolute w-full h-full opacity-0 z-10 cursor-pointer peer"
      />

      <span
        className={clsx(
          "block h-full w-full rounded-full border-2 transition-all duration-300",
          "before:absolute before:bottom-1 before:left-1 before:w-4 before:h-4 before:rounded-full",
          "before:transition-all before:duration-300 before:bg-center before:bg-no-repeat",
          "before:bg-gray-300",
          "border-gray-300",
          "bg-white",

          // checked state
          "peer-checked:border-primary",
          "peer-checked:bg-primary/10",
          "peer-checked:before:left-7",
          "peer-checked:before:bg-primary"
        )}
      />
    </label>
  );
};

export default Switch;