Popover Card

"use client";

import type { ReactNode } from "react";
import { Popover } from "radix-ui";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PopoverCardProps {
  trigger: ReactNode;
  title?: string;
  children?: ReactNode;
  side?: "top" | "right" | "bottom" | "left";
  align?: "start" | "center" | "end";
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** DA scope re-applied inside the portal. */
  da?: string;
  className?: string;
}

export const PopoverCardClose = Popover.Close;

/** Anchored popover (Radix Popover) with arrow, optional title and close button — for quick forms and details. */
export function PopoverCard({ trigger, title, children, side = "bottom", align = "center", open, onOpenChange, da = "minimal", className }: PopoverCardProps) {
  return (
    <Popover.Root open={open} onOpenChange={onOpenChange}>
      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
      <Popover.Portal>
        <Popover.Content
          data-da={da}
          side={side}
          align={align}
          sideOffset={8}
          collisionPadding={12}
          className={cn(
            "da-stroke z-50 w-72 rounded-da-lg bg-da-surface p-4 text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration) ease-da starting:scale-95 starting:opacity-0 motion-reduce:transition-none",
            className,
          )}
        >
          {title && (
            <div className="mb-3 flex items-center justify-between gap-3">
              <p className="text-sm font-semibold">{title}</p>
              <Popover.Close
                aria-label="Close"
                className="da-focus grid size-6 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
              >
                <X aria-hidden className="size-3.5" />
              </Popover.Close>
            </div>
          )}
          {children}
          <Popover.Arrow className="fill-da-surface stroke-da-border" width={12} height={6} />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}

export default PopoverCard;