'use client';

import { Moon, Sun1 } from 'iconsax-react';
import React from 'react'

type Props = {

} & React.InputHTMLAttributes<HTMLDivElement>;

export default function NightModeSwitch({ checked, onClick }: Props) {
    return (
        <div
            onClick={onClick}
            data-nightmode={checked}
            className={
                `visual-switch relative  inline-flex justify-between 
                px-1.5 h-6 w-10.5 items-center rounded-full transition-colors 
                duration-300 bg-gray-300 data-[nightmode=true]:bg-gray-800
            `}
        >
            <span
                data-nightmode={checked}
                className={`
                    absolute inline-block h-5 w-5 transform rounded-full
                    transition-transform duration-300
                    bg-white data-[nightmode=true]:bg-gray-600 
                     -translate-x-3.5 data-[nightmode=true]:translate-x-1
                `}
            />
            <Moon
                data-nightmode={checked}
                size={12}
                className='stroke-primary z-0 data-[nightmode=true]:stroke-white'
            />
            <Sun1
                data-nightmode={checked}
                size={12}
                className='stroke-[#FFA800] data-[nightmode=true]:fill-[#FFA800] z-0'
            />
        </div>
    )
}
