import { cn } from '@/lib/utils';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import type { ReactNode } from 'react';
import Icon from './Icon';
// import Tooltip from './Tooltip';

type DialogProps = {
  title?: ReactNode;
  tooltip: ReactNode;
  trigger: ReactNode;
  children: ReactNode;
  open?: boolean;
  fullscreen?: boolean;
  className?: string;
  onOpenChange?: (open: boolean) => void;
};

export default function Dialog({
  title,
  tooltip,
  trigger,
  children,
  open,
  fullscreen,
  className,
  onOpenChange
}: DialogProps) {
  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      {/* <Tooltip label={tooltip}> */}
      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>
      {/* </Tooltip> */}
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-highlight-primary/50" />
        <DialogPrimitive.Content
          className={cn(
            'fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2  transform flex-col overflow-hidden rounded-lg bg-primary-800 shadow-lg sm:w-1/3 sm:bg-primary-800/50',
            className
          )}
        >
          {title && (
            <div className="flex w-full justify-between pb-4">
              {title}
              <DialogPrimitive.Trigger>
                <Icon name="close-fill" className="hover:text-highlight-secondary" />
              </DialogPrimitive.Trigger>
            </div>
          )}
          {children}
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}