import Link from 'next/link';
import { Github, Cpu, HelpCircle } from 'lucide-react';

export default function Header({ onOpenHelp }) {
  return (
    <header className="h-[64px] bg-panel/80 backdrop-blur-md border-b border-border flex items-center justify-between px-6 z-50 relative">
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-md flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-primary/20">
          <Cpu size={20} />
        </div>
        <h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
          NeuroArch Studio
        </h1>
      </div>

      <div className="flex items-center gap-4">
        <button 
          onClick={onOpenHelp}
          className="flex items-center gap-2 text-muted hover:text-primary transition-colors text-sm font-medium px-3 py-1.5 rounded hover:bg-surface/50"
          title="Open Tutorial"
        >
          <HelpCircle size={16} />
          <span className="hidden sm:inline">Tutorial</span>
        </button>

        <Link 
          href="https://huggingface.co/spaces/akhaliq/anycoder" 
          target="_blank"
          className="flex items-center gap-2 text-muted hover:text-primary transition-colors text-sm font-medium"
        >
          <span>Built with anycoder</span>
          <Github size={14} />
        </Link>
      </div>
    </header>
  );
}