import { Menu, Folder, RefreshCw, Settings } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface AppHeaderProps {
  selectedProject: string | null;
  onToggleSidebar: () => void;
  sidebarCollapsed: boolean;
}

export const AppHeader = ({ selectedProject, onToggleSidebar, sidebarCollapsed }: AppHeaderProps) => {
  return (
    <header className="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 shadow-sm">
      <div className="flex items-center space-x-4">
        <Button
          variant="ghost"
          size="sm"
          onClick={onToggleSidebar}
          className="hover:bg-gray-100"
        >
          <Menu className="h-5 w-5" />
        </Button>
        
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-sm">B</span>
          </div>
          <h1 className="text-lg font-semibold text-gray-900">BMAD Viewer</h1>
        </div>
        
        {selectedProject && (
          <div className="flex items-center space-x-2 text-sm text-gray-600">
            <Folder className="h-4 w-4" />
            <span>{selectedProject}</span>
          </div>
        )}
      </div>
      
      <div className="flex items-center space-x-2">
        <div className="flex items-center space-x-2 text-xs text-gray-500">
          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
          <span>Watching for changes...</span>
        </div>
        
        <Button variant="ghost" size="sm" className="hover:bg-gray-100">
          <RefreshCw className="h-4 w-4" />
        </Button>
        
        <Button variant="ghost" size="sm" className="hover:bg-gray-100">
          <Settings className="h-4 w-4" />
        </Button>
      </div>
    </header>
  );
};