import { Bell, Menu, Search, User } from "lucide-react";
import React from "react";

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

const Header: React.FC<HeaderProps> = ({ onMenuClick, pageTitle }) => {
  const [hasError, setHasError] = React.useState(false);
  return (
    <header
      data-cmp="Header"
      className="header border-border bg-background/95 sticky top-0 z-20 flex h-16 items-center border-b px-4 backdrop-blur md:px-8"
    >
      {/* 1. Left: Menu button (only on mobile) */}
      <div className="flex flex-1 items-center md:hidden">
        <button
          title="Menu"
          onClick={onMenuClick}
          className="text-foreground hover:bg-muted -ml-2 rounded-md p-2"
        >
          <Menu className="h-6 w-6" />
        </button>
      </div>

      {/* 2. Center: Title (only on mobile) */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 md:hidden">
        <span className="text-xl font-bold tracking-tight text-muted-foreground">
          {pageTitle}
        </span>
      </div>

      {/* 3. Desktop: Search */}
      <div className="relative hidden max-w-xl flex-1 md:flex">
        <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
        <input
          type="text"
          placeholder="Search modules, users, or files..."
          className="bg-muted/50 text-foreground focus:ring-primary/20 w-full rounded-lg border-none py-2 pr-4 pl-10 text-sm transition-all focus:ring-2 focus:outline-none"
        />
      </div>

      {/* 4. RIGHT SIDE: Notifications and Profile */}
      <div className="flex flex-1 items-center justify-end space-x-4">
        <button
          title="Notifications"
          className="text-muted-foreground hover:text-foreground hover:bg-muted relative rounded-full p-2 transition-colors"
        >
          <Bell className="h-5 w-5" />
          <span className="bg-destructive border-card absolute top-1.5 right-1.5 h-2 w-2 rounded-full border-2"></span>
        </button>

        <div className="border-border/50 flex items-center space-x-3 border-l pl-4">
          <div className="hidden text-right sm:block text-nowrap">
            <p className="text-foreground text-sm font-medium">Community Admin</p>
            <p className="text-muted-foreground text-xs">Super Administrator</p>
          </div>
          {hasError ? (
            <div className="w-10 h-10 rounded-full border border-border bg-muted flex items-center justify-center">
              <User className="w-6 h-6 text-muted-foreground" />
            </div>
          ) : (
            <img
              src="/images/IMG_84271.jpg"
              alt="Profile"
              className="w-10 h-10 rounded-full object-cover border border-border"
              /* If image fails to load, set hasError to true */
              onError={() => setHasError(true)}
            />
          )}
        </div>
      </div>
    </header>
  );
};

export default Header;