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="header">
      <div class="header-content">
        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={onGoHome}>
          <img src="/assets/mindforge.png" alt="Mindforge" width="55" height="55" style={{ marginRight: '10px' }} />
          <h1 class="header-title">Mindforge</h1>
        </div>
        {repoName && (
          <div class="header-repo">
            <span class="header-repo-icon">⎇</span>
            <span class="header-repo-name">{repoName}</span>
          </div>
        )}
      </div>
    </header>
  );
}
