import React from 'react';

// Icons
const ICONS = {
  repo: "/public/epi_all_colors.svg",
};

const SunIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="5"/>
    <line x1="12" y1="1" x2="12" y2="3"/>
    <line x1="12" y1="21" x2="12" y2="23"/>
    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
    <line x1="1" y1="12" x2="3" y2="12"/>
    <line x1="21" y1="12" x2="23" y2="12"/>
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
  </svg>
);

const MoonIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" 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>
);

interface HeaderProps {
  title?: string;
  subtitle?: string;
  showThemeToggle?: boolean;
  isDark?: boolean;
  onToggleTheme?: () => void;
}

function Header({
  title = "Zenbu Repository",
  subtitle,
  showThemeToggle = true,
  isDark = false,
  onToggleTheme,
}: HeaderProps) {
  return (
    <header className="header">
      <img src={ICONS.repo} alt="Zenbu" className="header-icon" />
      <div className="header-content">
        <h1><a href="/">{title}</a></h1>
        {subtitle && <p className="header-subtitle">{subtitle}</p>}
      </div>
      {showThemeToggle && onToggleTheme && (
        <button className="theme-toggle" onClick={onToggleTheme} title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
          {isDark ? <SunIcon /> : <MoonIcon />}
          <span>{isDark ? 'Light' : 'Dark'}</span>
        </button>
      )}
    </header>
  );
}

export { Header };