import { Fragment } from 'react'
import { Switch } from '@headlessui/react'
import MoonLoader from 'react-spinners/MoonLoader'

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

const SwitchComponent = (props: Props) => {

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

    if (props.isLoading) {
        return (
            <MoonLoader size={20} color='black' className='ml-4' />
        )
    }

    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' : 'bg-gray-200'
                            } relative inline-flex h-6 w-11 items-center rounded-full`}
                    >
                        <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 transition`}
                        />
                    </button>
                )}
            </Switch>
            {
                props.label &&
                <div className='text-sm'>
                    : {props.label}
                </div>
            }
        </div>
    )
}

export default SwitchComponent