import { h } from "@stencil/core";
import { Icon } from "./icon";
import { botOffIcon } from "../../utils/icon-svg";
import { useTranslation } from "../../utils/utils";
export const ZToggle = ({ id, value, onChange, title }) => {
    const isBot = value === 'bot';
    const t = useTranslation();
    return (h("button", { id: id, type: "button", class: `relative inline-flex h-8 w-[72px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none ${isBot ? 'bg-primary' : 'bg-gray-300'}`, onClick: () => onChange(isBot ? 'admin' : 'bot'), title: title }, h("span", { class: `absolute left-2.5 text-[11px] font-bold text-white transition-opacity duration-300 ${isBot ? 'opacity-100' : 'opacity-0'}` }, t('on')), h("span", { class: `absolute right-3 text-[11px] font-bold text-gray-500 transition-opacity duration-300 ${isBot ? 'opacity-0' : 'opacity-100'}` }, t('off')), h("span", { class: `pointer-events-none z-10 flex h-7 w-7 transform items-center justify-center rounded-full bg-white shadow ring-0 transition duration-300 ease-in-out ${isBot ? 'translate-x-10' : 'translate-x-0'}` }, isBot ? (h(Icon, { name: "Bot", addClass: `size-[18px] transition-colors duration-300 text-primary` })) : (botOffIcon()))));
};
