"use client";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@aur-ui/ui/components/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@aur-ui/ui/components/dropdown-menu";
import { cn } from "@aur-ui/ui/lib/utils";
import type { ReactNode } from "react";

/**
 * Account menu — avatar trigger with a focus/hover ring, an identity header
 * (name + email) inside the menu, then whatever items the app needs
 * (DropdownMenuItem / Group / Separator as children).
 */
export function UserMenu({
  name,
  email,
  avatarSrc,
  avatarFallback,
  align = "end",
  triggerLabel = "Account",
  className,
  children,
}: {
  name: ReactNode;
  email?: ReactNode;
  avatarSrc?: string;
  /** Initials shown while the image loads or when there is none. */
  avatarFallback?: ReactNode;
  align?: "start" | "center" | "end";
  triggerLabel?: string;
  className?: string;
  children: ReactNode;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        aria-label={triggerLabel}
        className={cn(
          "rounded-full transition-shadow outline-none hover:ring-2 hover:ring-ink-wash focus-visible:ring-2 focus-visible:ring-brand/40 data-[state=open]:ring-2 data-[state=open]:ring-brand/40",
          className,
        )}
      >
        <Avatar>
          {avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null}
          <AvatarFallback>{avatarFallback}</AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent align={align} className="min-w-56">
        <div className="px-2 py-1.5">
          <div className="truncate text-sm font-medium text-ink-900">
            {name}
          </div>
          {email ? (
            <div className="truncate text-xs text-ink-500">{email}</div>
          ) : null}
        </div>
        <DropdownMenuSeparator />
        {children}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}