import {useState} from 'react'
export function ThemeToggle({defaultDark=true}:{defaultDark?:boolean}) {
  const [dark, setDark] = useState(defaultDark)
  return (
    <button
      onClick={()=>{const next=!dark;setDark(next);document.documentElement.setAttribute('data-theme',next?'dark':'light')}}
      aria-label="Toggle theme"
      style={{position:'fixed',top:16,right:16,zIndex:9999,padding:'7px 14px',borderRadius:99,border:'none',cursor:'pointer',color:'#fff',fontWeight:700,fontFamily:'Inter,sans-serif',fontSize:'.85rem',background:dark?'linear-gradient(135deg,#2563eb,#7c3aed)':'linear-gradient(135deg,#fbbf24,#f97316)',boxShadow:'0 0 16px rgba(0,0,0,.3)',transition:'all .2s'}}>
      {dark?'🌙':'☀️'}
    </button>
  )
}