import { Fragment } from 'react'
import { Switch } from '@headlessui/react'

interface Props {
    active: boolean,
    onChange: (value: boolean) => void,
    isLoading?: boolean,
    label?: string,
}

const SwitchComponent = (props: Props) => {

    const handleChange = (value: boolean) => {
        props.onChange(value)
    }

    return (
        <div className='dltr w-fit flex gap-2 items-center'>
            <Switch checked={props.active} onChange={handleChange} as={Fragment}>
                {({ checked }) => (
                    <button
                        className={`${checked
                            ? 'bg-primary dark:bg-blue-500'
                            : 'bg-gray-300 dark:bg-gray-700'
                            } relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ease-in-out shadow-inner`}
                    >
                        <span className="sr-only">Enable notifications</span>
                        <span
                            className={`${checked ? 'translate-x-6' : 'translate-x-1'
                                } inline-block h-4 w-4 transform rounded-full bg-white dark:bg-gray-100 shadow-lg transition-all duration-300 ease-in-out`}
                        />
                    </button>
                )}
            </Switch>
            {
                props.label &&
                <div className='text-sm text-gray-700 dark:text-gray-300'>
                    : {props.label}
                </div>
            }
        </div>
    )
}

export default SwitchComponent
