'use client'

import { useI18n } from '@/lib/i18n'

export default function LanguageSwitcher() {
  const { language, setLanguage } = useI18n()

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginLeft: '16px' }}>
      <button
        onClick={() => setLanguage('en')}
        style={{
          padding: '6px 12px',
          fontSize: '13px',
          background: language === 'en' ? 'var(--accent)' : 'transparent',
          color: language === 'en' ? '#000' : 'var(--muted)',
          border: `1px solid ${language === 'en' ? 'var(--accent)' : 'var(--border)'}`,
          borderRadius: '6px',
          cursor: 'pointer',
          fontWeight: language === 'en' ? 500 : 400,
          transition: 'all 0.2s',
        }}
      >
        EN
      </button>
      <button
        onClick={() => setLanguage('de')}
        style={{
          padding: '6px 12px',
          fontSize: '13px',
          background: language === 'de' ? 'var(--accent)' : 'transparent',
          color: language === 'de' ? '#000' : 'var(--muted)',
          border: `1px solid ${language === 'de' ? 'var(--accent)' : 'var(--border)'}`,
          borderRadius: '6px',
          cursor: 'pointer',
          fontWeight: language === 'de' ? 500 : 400,
          transition: 'all 0.2s',
        }}
      >
        DE
      </button>
    </div>
  )
}