import {
  ModalOverlay,
  Modal as RACModal,
  type ModalOverlayProps,
} from 'react-aria-components/Modal';
import { tv } from 'tailwind-variants';

const overlayStyles = tv({
  base: 'fixed top-0 left-0 isolate z-20 flex h-(--visual-viewport-height) w-full items-center justify-center bg-black/[15%] p-4 text-center backdrop-blur-lg',
  variants: {
    isEntering: {
      true: 'animate-in fade-in duration-200 ease-out',
    },
    isExiting: {
      true: 'animate-out fade-out duration-200 ease-in',
    },
  },
});

const modalStyles = tv({
  base: 'max-h-full w-full max-w-2xl overflow-y-auto rounded-2xl border border-black/10 bg-white bg-clip-padding text-left align-middle text-slate-700 shadow-2xl dark:border-white/10 dark:bg-zinc-800/70 dark:text-zinc-300 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]',
  variants: {
    isEntering: {
      true: 'animate-in zoom-in-105 duration-200 ease-out',
    },
    isExiting: {
      true: 'animate-out zoom-out-95 duration-200 ease-in',
    },
  },
});

export function Modal(props: ModalOverlayProps) {
  return (
    <ModalOverlay {...props} className={overlayStyles}>
      <RACModal {...props} className={modalStyles} />
    </ModalOverlay>
  );
}