import { Menu, Phone, DollarSign, Heart, Users, Lock, Calendar, Settings, LogOut, HelpCircle, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";

interface HeaderProps {
  onMenuClick: () => void;
}

export const Header = ({ onMenuClick }: HeaderProps) => {
  return (
    <header className="bg-card border-b border-border sticky top-0 z-50 shadow-sm">
      <div className="flex items-center justify-between px-4 py-3">
        {/* Logo and Menu */}
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={onMenuClick}
            className="lg:hidden"
          >
            <Menu className="h-5 w-5" />
          </Button>
          
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
              <DollarSign className="h-6 w-6 text-primary-foreground" />
            </div>
            <div className="hidden sm:block">
              <h1 className="text-xl font-bold text-foreground">USA Funding</h1>
              <p className="text-sm text-muted-foreground">Grant Applications</p>
            </div>
          </div>
        </div>

        {/* Contact Info */}
        <div className="hidden md:flex items-center gap-2 text-sm">
          <Phone className="h-4 w-4 text-muted-foreground" />
          <span className="text-muted-foreground">Need Help? Call</span>
          <a href="tel:8883641167" className="font-semibold text-primary hover:underline">
            (888) 364-1167
          </a>
        </div>

        {/* Quick Actions */}
        <div className="hidden lg:flex items-center gap-2">
          <Button variant="ghost" size="sm" className="gap-2">
            <DollarSign className="h-4 w-4 text-green-600" />
            <span className="text-xs">Givesback</span>
          </Button>
          
          <Button variant="ghost" size="sm" className="gap-2">
            <Heart className="h-4 w-4 text-red-600" />
            <span className="text-xs">Favorites</span>
          </Button>
          
          <Button variant="ghost" size="sm" className="gap-2">
            <Users className="h-4 w-4" />
            <span className="text-xs">Seminars</span>
          </Button>
          
          <Button variant="ghost" size="sm" className="gap-2">
            <Calendar className="h-4 w-4 text-orange-600" />
            <span className="text-xs">Deadlines</span>
          </Button>
          
          <div className="w-px h-6 bg-border mx-2" />
          
          <Button variant="ghost" size="sm">
            <Settings className="h-4 w-4" />
          </Button>
          
          <Button variant="ghost" size="sm">
            <LogOut className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </header>
  );
};