// Adapted from Base UI compositions (MIT). See THIRD_PARTY_NOTICES.md.
"use client";
import type { ComponentProps } from "react";
import { AlertDialog as Primitive } from "./_ynrlib/base-ui.js";
export const AlertDialog = Primitive.Root;
export function AlertDialogTrigger({
  className,
  ...props
}: ComponentProps<typeof Primitive.Trigger>) {
  return (
    <Primitive.Trigger
      {...props}
      className={
        typeof className === "function"
          ? (state) => `ynr-alert-dialog-trigger ${className(state) ?? ""}`
          : `ynr-alert-dialog-trigger ${className ?? ""}`
      }
    />
  );
}
export const AlertDialogPortal = Primitive.Portal;
export function AlertDialogBackdrop({
  className,
  ...props
}: ComponentProps<typeof Primitive.Backdrop>) {
  return (
    <Primitive.Backdrop
      {...props}
      className={
        typeof className === "function"
          ? (state) => `ynr-alert-dialog-backdrop ${className(state) ?? ""}`
          : `ynr-alert-dialog-backdrop ${className ?? ""}`
      }
    />
  );
}
export function AlertDialogPopup({
  className,
  ...props
}: ComponentProps<typeof Primitive.Popup>) {
  return (
    <Primitive.Popup
      {...props}
      className={
        typeof className === "function"
          ? (state) => `ynr-alert-dialog-popup ${className(state) ?? ""}`
          : `ynr-alert-dialog-popup ${className ?? ""}`
      }
    />
  );
}
export function AlertDialogTitle({
  className,
  ...props
}: ComponentProps<typeof Primitive.Title>) {
  return (
    <Primitive.Title
      {...props}
      className={
        typeof className === "function"
          ? (state) => `ynr-alert-dialog-title ${className(state) ?? ""}`
          : `ynr-alert-dialog-title ${className ?? ""}`
      }
    />
  );
}
export function AlertDialogDescription({
  className,
  ...props
}: ComponentProps<typeof Primitive.Description>) {
  return (
    <Primitive.Description
      {...props}
      className={
        typeof className === "function"
          ? (state) => `ynr-alert-dialog-description ${className(state) ?? ""}`
          : `ynr-alert-dialog-description ${className ?? ""}`
      }
    />
  );
}
export function AlertDialogClose({
  className,
  ...props
}: ComponentProps<typeof Primitive.Close>) {
  return (
    <Primitive.Close
      {...props}
      className={
        typeof className === "function"
          ? (state) => `ynr-alert-dialog-close ${className(state) ?? ""}`
          : `ynr-alert-dialog-close ${className ?? ""}`
      }
    />
  );
}

// shadcn-style composition over the existing Base UI accessibility primitive.
export function AlertDialogContent(
  props: ComponentProps<typeof AlertDialogPopup>,
) {
  return (
    <AlertDialogPortal>
      <AlertDialogBackdrop />
      <AlertDialogPopup {...props} />
    </AlertDialogPortal>
  );
}
export function AlertDialogHeader({
  className = "",
  ...props
}: ComponentProps<"div">) {
  return <div {...props} className={`ynr-alert-dialog-header ${className}`} />;
}
export function AlertDialogFooter({
  className = "",
  ...props
}: ComponentProps<"div">) {
  return <div {...props} className={`ynr-alert-dialog-footer ${className}`} />;
}
export function AlertDialogCancel(
  props: ComponentProps<typeof AlertDialogClose>,
) {
  return <AlertDialogClose {...props} data-action="cancel" />;
}
export function AlertDialogAction(
  props: ComponentProps<typeof AlertDialogClose>,
) {
  return <AlertDialogClose {...props} data-action="confirm" />;
}