"use client";

import { Bell, CalendarDays } from "lucide-react";
import { signOut } from "next-auth/react";
import type { Session } from "next-auth";
import { Button } from "@/components/ui/button";

type AdminHeaderProps = {
  session: Session | null;
  title?: string;
};

export function AdminHeader({ session, title = "Admin Dashboard" }: AdminHeaderProps) {
  return (
    <header className="sticky top-0 z-30 border-b border-border bg-white">
      <div className="flex min-h-20 flex-col justify-between gap-3 px-5 py-4 md:flex-row md:items-center">
        <div>
          <h1 className="text-2xl font-bold text-navy-deep">{title}</h1>
          <p className="text-xs text-navy-muted">Overview of your showroom website performance and operations</p>
        </div>
        <div className="flex items-center gap-2">
          <div className="hidden items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs text-navy-muted md:flex">
            <CalendarDays className="h-4 w-4" />
            May 19 - Jun 18, 2025
          </div>
          <button type="button" aria-label="Notifications" className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border text-navy-muted">
            <Bell className="h-4 w-4" />
          </button>
          <div className="rounded-lg border border-border px-3 py-1.5 text-right text-xs">
            <p className="font-bold text-navy-deep">{session?.user?.name ?? "Admin"}</p>
            <p className="text-navy-muted">{session?.user?.role ?? "Super Admin"}</p>
          </div>
          <Button variant="outline" size="sm" onClick={() => signOut({ callbackUrl: "/admin/login" })}>
            Sign Out
          </Button>
        </div>
      </div>
    </header>
  );
}