import { type ReactNode } from 'react';
import { Dialog as RDialog } from 'radix-ui';
import { X } from '@phosphor-icons/react';
import { IconButton } from '../icon-button';

export const Dialog = ({
  trigger,
  title,
  description,
  children,
  footer,
  open,
  defaultOpen,
  onOpenChange,
  modal,
}: {
  trigger?: ReactNode;
  title: string;
  description?: ReactNode;
  children?: ReactNode;
  footer?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (o: boolean) => void;
  modal?: boolean;
}) => (
  <RDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
    {trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
    <RDialog.Portal>
      <RDialog.Overlay className="modern-sk-overlay" />
      <RDialog.Content className="modern-sk-dialog">
        <RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
        {description && (
          <RDialog.Description className="modern-sk-dialog__desc">
            {description}
          </RDialog.Description>
        )}
        {children && <div className="modern-sk-dialog__body">{children}</div>}
        {footer && <div className="modern-sk-dialog__footer">{footer}</div>}
        <RDialog.Close asChild>
          <IconButton
            variant="ghost"
            size="sm"
            className="modern-sk-dialog__close"
            aria-label="Close"
          >
            <X size={14} weight="bold" />
          </IconButton>
        </RDialog.Close>
      </RDialog.Content>
    </RDialog.Portal>
  </RDialog.Root>
);

export const DialogClose = RDialog.Close;