function ThemeToggle({ mobile = false }) {
  const getTheme = () => document.documentElement.getAttribute('data-theme') || 'dark';
  const [theme, setTheme] = React.useState(getTheme);

  const apply = (t) => {
    document.documentElement.setAttribute('data-theme', t);
    try { localStorage.setItem('titan-theme', t); } catch(e){}
    setTheme(t);
  };

  const toggle = () => apply(theme === 'dark' ? 'light' : 'dark');

  const SunIcon = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4"/>
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
    </svg>
  );
  const MoonIcon = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  );

  if (mobile) {
    return (
      <button className="btn btn-ghost" onClick={toggle} style={{justifyContent:'center'}} aria-label="Temayı değiştir">
        {theme === 'dark' ? SunIcon : MoonIcon}
        <span style={{marginLeft:8}}>{theme === 'dark' ? 'Açık tema' : 'Koyu tema'}</span>
      </button>
    );
  }

  return (
    <button className="theme-toggle" onClick={toggle} aria-label={theme === 'dark' ? 'Açık temaya geç' : 'Koyu temaya geç'} title={theme === 'dark' ? 'Açık temaya geç' : 'Koyu temaya geç'}>
      {theme === 'dark' ? SunIcon : MoonIcon}
    </button>
  );
}
window.ThemeToggle = ThemeToggle;