import { Link, useLocation } from "wouter";
import { useLanguage } from "../../contexts/LanguageContext";
import { Button } from "../ui/button";

export function Header() {
  const { language, setLanguage, t } = useLanguage();
  const [location] = useLocation();

  const toggleLanguage = () => {
    setLanguage(language === "ar" ? "en" : "ar");
  };

  const navItems = [
    { path: "/", label: t.common.home },
    { path: "/opportunities", label: t.common.opportunities },
    { path: "/request", label: t.common.requestSupport },
    { path: "/admin", label: t.common.adminDashboard },
    { path: "/whatsapp-log", label: t.common.whatsappLog },
  ];

  return (
    <header className="border-b bg-white sticky top-0 z-50">
      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center gap-8">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-8 h-8 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold">
              إ
            </div>
            <span className="text-xl font-bold text-primary">{t.common.ehsan}</span>
          </Link>
          
          <nav className="hidden md:flex items-center gap-1">
            {navItems.map((item) => (
              <Link 
                key={item.path} 
                href={item.path}
                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                  location === item.path 
                    ? "text-primary bg-primary/10" 
                    : "text-muted-foreground hover:text-foreground hover:bg-muted"
                }`}
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>

        <div className="flex items-center gap-4">
          <Button variant="ghost" onClick={toggleLanguage} className="font-medium">
            {t.common.language}
          </Button>
        </div>
      </div>
    </header>
  );
}
