/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React from "react";
import { Switch as RawSwitch } from "@headlessui/react";
import classNames from "classnames";
/* -------------------------------------------------------------------------- */
/*                               Properties type                              */
/* -------------------------------------------------------------------------- */
type Props = {
  alterText?: string;
  enabled: boolean;
  onChange: () => void;
};

export default function Switch({ alterText, enabled, onChange }: Props) {
  return (
    <RawSwitch
      checked={enabled}
      onChange={onChange}
      className={classNames(
        {
          "bg-gray-300": !enabled,
          "bg-blue-600": enabled,
        },
        "relative inline-flex flex-shrink-0 h-6 w-10 border-2",
        "border-transparent rounded-full cursor-pointer",
        "transition-colors ease-in-out duration-200 focus:outline-none",
        "focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"
      )}
    >
      <span className="sr-only">{alterText}</span>
      <span
          aria-hidden="true"
          className={`${enabled ? 'translate-x-4' : 'translate-x-0'}
            pointer-events-none inline-block h-5 w-5 rounded-full bg-main shadow-lg transform ring-0 transition ease-in-out duration-200`}
        />
    </RawSwitch>
  );
}
