import { Switch } from '@headlessui/react';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { classNames } from '../helpers';

const ToggleSwitch = ( { onChange, value, variant = 'dark' } ) => {
	const switchClassNames = {
		dark: {
			wrapper: [
				'w-10',
				value ? 'bg-accent-st' : 'bg-zip-dark-theme-border',
			],
			background: [ value ? 'bg-accent-st' : 'bg-zip-dark-theme-border' ],
			switch: [ 'size-5', value ? 'translate-x-5' : 'translate-x-0' ],
		},
		light: {
			wrapper: [ 'w-9', value ? 'bg-accent-st' : 'bg-border-tertiary' ],
			background: [ value ? 'bg-accent-st' : 'bg-border-tertiary' ],
			switch: [
				'size-4',
				value ? 'translate-x-[1.15rem]' : 'translate-x-[0.15rem]',
			],
		},
	};
	return (
		<Switch
			checked={ value }
			onChange={ onChange }
			className={ classNames(
				'group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none border-0 bg-transparent',
				switchClassNames[ variant ].wrapper
			) }
		>
			<span className="sr-only">
				{ __( 'Use setting', 'ai-builder' ) }
			</span>
			<span
				aria-hidden="true"
				className="pointer-events-none absolute h-full w-full rounded-md bg-transparent"
			/>
			<span
				aria-hidden="true"
				className={ classNames(
					'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-150 ease-out',
					switchClassNames[ variant ].background
				) }
			/>
			<span
				aria-hidden="true"
				className={ classNames(
					'pointer-events-none absolute size-5 left-0 inline-block transform rounded-full bg-white shadow transition-transform duration-150 ease-out',
					switchClassNames[ variant ].switch
				) }
			/>
		</Switch>
	);
};

export default memo( ToggleSwitch );
.elementor-tab-title a{color:inherit}.elementor-accordion{text-align:start}.elementor-accordion .elementor-accordion-item{border:1px solid #d5d8dc}.elementor-accordion .elementor-accordion-item+.elementor-accordion-item{border-block-start:none}.elementor-accordion .elementor-tab-title{cursor:pointer;font-weight:700;line-height:1;margin:0;outline:none;padding:15px 20px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{display:inline-block;width:1.5em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{height:1em;width:1em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right{float:right;text-align:right}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left{float:left;text-align:left}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-closed{display:block}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-opened,.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed{display:none}.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{display:block}.elementor-accordion .elementor-tab-content{border-block-start:1px solid #d5d8dc;display:none;padding:15px 20px}@media (max-width:767px){.elementor-accordion .elementor-tab-title{padding:12px 15px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{width:1.2em}.elementor-accordion .elementor-tab-content{padding:7px 15px}}.e-con-inner>.elementor-widget-accordion,.e-con>.elementor-widget-accordion{width:var(--container-widget-width);--flex-grow:var( --container-widget-flex-grow )}<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://etossimo.ventodijital.com/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-posts-post-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-posts-personnel-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-posts-portfolio-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-posts-pp_video_block-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-taxonomies-category-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-taxonomies-post_tag-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-taxonomies-post_format-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-taxonomies-portfolio_category-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-taxonomies-portfolio_tag-1.xml</loc></sitemap><sitemap><loc>https://etossimo.ventodijital.com/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>