import type React from "react";

import { Switch } from "@headlessui/react";

export interface ToggleProps {
  checked: boolean;
  label?: string;
  description?: string;
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
}

export const Toggle = ({
  checked,
  label,
  description,
  disabled,
  onChange
}: ToggleProps): JSX.Element => {
  return (
    <Switch.Group as="div" className="flex items-center justify-between">
      <span className="flex flex-grow flex-col">
        {label && (
          <Switch.Label
            as="span"
            className="text-sm font-medium text-gray-900"
            passive
          >
            {label}
          </Switch.Label>
        )}
        {description && (
          <Switch.Description as="span" className="text-sm text-gray-500">
            {description}
          </Switch.Description>
        )}
      </span>
      <Switch
        checked={checked}
        disabled={disabled}
        onChange={onChange}
        className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
          checked ? "bg-orange-600" : "bg-orange-100"
        } ${disabled ? "cursor-not-allowed bg-orange-400" : ""}`}
      >
        <span
          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
            checked ? "translate-x-5" : "translate-x-0"
          }`}
        />
      </Switch>
    </Switch.Group>
  );
};