import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'
import React, { FC } from 'react'

type Props = {
    isOpen: boolean,
    close: () => void,
    children: React.ReactNode,
    title: string,
    subTitle: string,
    icon: React.ReactNode
}

export const DialogComponent: FC<Props> = ({ isOpen, children, close, title, subTitle, icon }) => {
    return (
        <>
            <Dialog open={isOpen} as="div" className="relative z-10 focus:outline-none" onClose={close}>
                <DialogBackdrop className="fixed inset-0 bg-black/30" />
                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
                    <div className="flex min-h-full items-center justify-center p-4">
                        <DialogPanel
                            transition
                            className="w-full max-w-md rounded-[40px] bg-white shadow-sm border border-secondary-text-color/10 p-6 backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0"
                        >
                            <DialogTitle as="h3" className="text-center flex flex-col gap-[18px] items-center justify-center">
                                <div className="size-[72px] border border-border-color rounded-full flex justify-center items-center">
                                    {icon}
                                </div>
                                <div className="flex flex-col gap-[6px]">
                                    <p className="font-medium text-[20px] text-primary-text-color">{title}</p>
                                    <p className="font-normal text-sm text-secondary-text-color">{subTitle}</p>
                                </div>
                            </DialogTitle>
                            {children}
                        </DialogPanel>
                    </div>
                </div>
            </Dialog>
        </>
    )
}
