import { Moon, Sun1 } from 'iconsax-react'
import { useTheme } from '@/contexts/ThemeContext'
import Button from '@/components/Button'
import { getIconColor } from '@/utils/colorUtils'

const ThemeToggle = () => {
    const { theme, toggleTheme } = useTheme()

    const isDark = theme === 'dark'
    const label = isDark ? 'تغییر به حالت روشن' : 'تغییر به حالت تاریک'

    return (
        <Button
            onClick={toggleTheme}
            variant="secondary"
            title={label}
            className={`group relative w-12 h-6 p-0 rounded-full transition-all duration-300
            bg-secondary/90 dark:bg-secondary ring-1 ring-inset ring-border/60
            hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
        >
            {/* Thumb */}
            <span
                className={`pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full border border-border z-0
                bg-card shadow-[0_2px_6px_rgba(0,0,0,0.08)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.35)]
                transition-transform duration-300 ease-out will-change-transform ${isDark ? 'translate-x-6' : 'translate-x-0'}`}
            />

            {/* Icons */}
            <span className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 place-items-center">
                <Sun1
                    size={14}
                    color={isDark ? getIconColor('muted') : getIconColor('primary')}
                    className={`transition-opacity duration-300 ${isDark ? 'opacity-60' : 'opacity-100'}`}
                />
                <Moon
                    size={14}
                    color={isDark ? getIconColor('primary') : getIconColor('muted')}
                    className={`transition-opacity duration-300 ${isDark ? 'opacity-100' : 'opacity-60'}`}
                />
            </span>
        </Button>
    )
}

export default ThemeToggle
