import React from 'react';
import { useI18n } from '../context/I18nContext';
import { useTheme } from '../context/ThemeContext';

export default function UniversalTopbar() {
  const { lang, switchLanguage } = useI18n();
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{
      position: 'fixed', top: '20px', right: '20px',
      background: 'rgba(5, 5, 10, 0.6)', backdropFilter: 'blur(15px)',
      border: '1px solid rgba(0, 243, 255, 0.2)', zIndex: 1000,
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      padding: '8px 15px', gap: '15px', borderRadius: '30px',
      boxShadow: '0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,243,255,0.1)'
    }} className="universal-topbar">
      
      {/* Kinetik Language Switcher */}
      <div style={{
        display: 'flex', background: 'rgba(0, 0, 0, 0.3)', 
        borderRadius: '20px', overflow: 'hidden', border: '1px solid rgba(0, 243, 255, 0.1)'
      }}>
        <button 
          onClick={() => switchLanguage('id')}
          style={{
            background: lang === 'id' ? 'var(--accent-purple)' : 'transparent',
            color: lang === 'id' ? '#fff' : 'var(--text-muted)',
            border: 'none', padding: '5px 15px', cursor: 'pointer',
            fontFamily: 'monospace', fontWeight: 'bold', fontSize: '0.8rem',
            transition: 'all 0.3s'
          }}
        >
          ID
        </button>
        <button 
          onClick={() => switchLanguage('en')}
          style={{
            background: lang === 'en' ? 'var(--accent-purple)' : 'transparent',
            color: lang === 'en' ? '#fff' : 'var(--text-muted)',
            border: 'none', padding: '5px 15px', cursor: 'pointer',
            fontFamily: 'monospace', fontWeight: 'bold', fontSize: '0.8rem',
            transition: 'all 0.3s'
          }}
        >
          ENG
        </button>
      </div>

      {/* Fasad Cahaya (Dark/Light Switcher) */}
      <button 
        onClick={toggleTheme}
        style={{
          background: 'transparent', color: theme === 'light' ? 'var(--accent-yellow)' : 'var(--accent-cyan)',
          border: '1px solid rgba(0, 243, 255, 0.2)', padding: '5px 10px', borderRadius: '50%',
          cursor: 'pointer', fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 0.3s', width: '35px', height: '35px'
        }}
        title="Toggle Light/Dark Fasad"
      >
        {theme === 'light' ? '☀️' : '🌙'}
      </button>

    </div>
  );
}
