import { useState, useEffect } from 'preact/hooks';
import { MindforgeApiService } from '../services/MindforgeApiService';
import './Header.css';

interface HeaderProps {
  onGoHome?: () => void;
}

export function Header({ onGoHome }: HeaderProps) {
  const [repoName, setRepoName] = useState<string | null>(null);

  useEffect(() => {
    MindforgeApiService.getRepositoryInfo()
      .then(info => setRepoName(info.name))
      .catch(() => setRepoName(null));
  }, []);

  return (
    <header class="topbar">
      <div class="topbar-left" onClick={onGoHome}>
        <img class="topbar-logo" src="/assets/mindforge.png" alt="Mindforge" width="42" height="42" />
        <h1 class="topbar-title">Mindforge</h1>
      </div>
      {repoName && (
        <div class="topbar-right">
          <span class="chip">
            <span style="font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)">Repositório</span>
            {repoName}
          </span>
        </div>
      )}
    </header>
  );
}
