"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowLeft } from "lucide-react";

interface AppHeaderProps {
  title?: string;
  transparent?: boolean;
}

export default function AppHeader({ title, transparent = false }: AppHeaderProps) {
  const pathname = usePathname();
  const isHome = pathname === "/";

  return (
    <header
      className={`sticky top-0 z-50 px-4 py-3 flex items-center gap-3 ${
        transparent
          ? "bg-transparent text-white"
          : "bg-gradient-to-r from-emerald-mosque to-emerald-dark text-white shadow-md"
      }`}
    >
      {!isHome && (
        <Link href="/" className="p-1.5 bg-white/15 rounded-full backdrop-blur-sm hover:bg-white/25 transition-colors">
          <ArrowLeft size={18} />
        </Link>
      )}
      <div className="flex items-center gap-2.5 flex-1 min-w-0">
        <div className="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center overflow-hidden flex-shrink-0">
          <img
            src="https://stenhagenmosken.se/wp-content/uploads/2026/03/Logo.png"
            alt="Logo"
            className="w-7 h-7 object-contain"
          />
        </div>
        {title ? (
          <h1 className="font-bold text-base truncate">{title}</h1>
        ) : (
          <div className="min-w-0">
            <h1 className="font-bold text-base leading-tight truncate">Stenhagen Moskén</h1>
            <p className="text-white/60 text-[10px] leading-tight">Islamic Center • Uppsala</p>
          </div>
        )}
      </div>
    </header>
  );
}