import clsx from 'clsx'
import { useTranslations } from 'next-intl'
import { type ComponentProps, type ReactNode } from 'react'

import { Dialog as RadixDialog } from 'radix-ui'

import { IoClose } from 'react-icons/io5'

import { closeStyles, contentStyles, overlayStyles } from './Dialog.styles'

type DialogProps = ComponentProps<typeof RadixDialog.Root> &
	ComponentProps<typeof RadixDialog.Content> & {
		title?: ReactNode
		blur?: boolean
		onCancel?: () => void
	}

function Dialog({
	title,
	children,
	onCancel,
	onEscapeKeyDown,
	blur,
	className,
	...props
}: DialogProps) {
	const t = useTranslations('')

	return (
		<RadixDialog.Root {...props}>
			<RadixDialog.Portal>
				<RadixDialog.Overlay className={overlayStyles({ blur })} />
				<RadixDialog.Content
					onEscapeKeyDown={onEscapeKeyDown}
					onPointerDownOutside={onCancel}
					className={clsx(contentStyles, className)}
				>
					<RadixDialog.Title asChild>
						<div className='w-full'>{title}</div>
					</RadixDialog.Title>
					{children}
					<RadixDialog.Close
						onClick={onCancel}
						aria-label={t('close')}
						className={closeStyles}
					>
						<IoClose />
					</RadixDialog.Close>
				</RadixDialog.Content>
			</RadixDialog.Portal>
		</RadixDialog.Root>
	)
}

export { Dialog }
