"use client";
/*
 * Documentation:
 * Dialog — https://app.subframe.com/f023064a5ca0/library?component=Dialog_ca59db17-43fb-4247-8094-3c55162e902d
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface ContentProps
  extends React.ComponentProps<typeof SubframeCore.Dialog.Content> {
  children?: React.ReactNode;
  size?: "xs" | "small" | "medium" | "large" | "media";
  padding?: "default" | "spacious";
  hideCloseIcon?: boolean;
  className?: string;
}

const Content = React.forwardRef<HTMLDivElement, ContentProps>(function Content(
  {
    children,
    size = "small",
    padding = "default",
    hideCloseIcon = false,
    className,
    ...otherProps
  }: ContentProps,
  ref
) {
  return children ? (
    <SubframeCore.Dialog.Content asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "group/04ea6d47 flex w-full flex-col items-start gap-6 rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-4 py-4 shadow-lg overflow-auto max-w-[560px] mobile:overflow-auto mobile:max-h-[90vh] mobile:max-w-[calc(100vw-32px)]",
          {
            "hide-close-icon": hideCloseIcon,
            "px-8 py-8": padding === "spacious",
            "h-192 w-320 max-w-320": size === "media",
            "max-w-[1200px]": size === "large",
            "max-w-[720px]": size === "medium",
            "max-w-[420px]": size === "xs",
          },
          className
        )}
        ref={ref}
      >
        {children}
      </div>
    </SubframeCore.Dialog.Content>
  ) : null;
});

export interface DialogRootProps
  extends React.ComponentProps<typeof SubframeCore.Dialog.Root> {
  children?: React.ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
}

const DialogRoot = React.forwardRef<HTMLDivElement, DialogRootProps>(
  function DialogRoot(
    { children, className, ...otherProps }: DialogRootProps,
    ref
  ) {
    return children ? (
      <SubframeCore.Dialog.Root asChild={true} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "flex h-full w-full flex-col items-center justify-center gap-2 bg-surface-neutral-overlay",
            className
          )}
          ref={ref}
        >
          {children}
        </div>
      </SubframeCore.Dialog.Root>
    ) : null;
  }
);

export const Dialog = Object.assign(DialogRoot, {
  Content,
});