import { Sun, Moon } from 'lucide-react';
import { useTheme } from '@/hooks/useTheme';

export default function ThemeBubble() {
  const { resolvedTheme, setTheme } = useTheme();
  const isDark = resolvedTheme === 'dark';

  return (
    <button
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
      title={isDark ? 'Светлая тема' : 'Тёмная тема'}
      aria-label="Переключить тему"
      className={[
        'fixed bottom-5 right-5 z-40',
        'flex items-center gap-2 h-10 px-3.5 rounded-full',
        'border border-[var(--border)]',
        'bg-[var(--surface)] shadow-[0_4px_20px_rgba(0,0,0,0.18)]',
        'text-[var(--fg-secondary)] text-xs font-semibold',
        'transition-all duration-200 ease-out',
        'hover:shadow-[0_6px_24px_rgba(0,0,0,0.25)] hover:-translate-y-0.5',
        'active:scale-95 active:translate-y-0',
        'select-none cursor-pointer backdrop-blur-sm',
      ].join(' ')}
    >
      {isDark
        ? <><Sun className="h-4 w-4 text-amber-400" strokeWidth={1.8} /><span className="hidden sm:inline">Светлая</span></>
        : <><Moon className="h-4 w-4 text-indigo-400" strokeWidth={1.8} /><span className="hidden sm:inline">Тёмная</span></>
      }
    </button>
  );
}