import { Moon, Sun } from 'lucide-react'
import { useTheme } from '../../theme/ThemeContext'

/** 다크/라이트 테마 토글 버튼. 사이드바 하단 등에 배치. */
export default function ThemeToggle() {
  const { theme, toggle } = useTheme()
  return (
    <button onClick={toggle} title="테마 전환"
      style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px',
        background: 'none', border: '1px solid var(--uiws-border, #2d3448)', borderRadius: 8,
        color: 'var(--uiws-text-muted, #8892b0)', cursor: 'pointer', fontSize: 13, width: '100%' }}>
      {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
      {theme === 'dark' ? '라이트 모드' : '다크 모드'}
    </button>
  )
}
