import Button from "@/components/Low/Button";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { Fragment } from "react";

interface Props {
    isOpen: boolean;
    text: {
        title?: string;
        content: string;
    }
    onClose: () => void
}

const ReadingPassageModal: React.FC<Props> = ({ isOpen, text, onClose }) => {
    return (
        <Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" className="relative z-10" onClose={onClose}>
                <TransitionChild
                    as={Fragment}
                    enter="ease-out duration-300"
                    enterFrom="opacity-0"
                    enterTo="opacity-100"
                    leave="ease-in duration-200"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-black bg-opacity-25" />
                </TransitionChild>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-center justify-center p-4 text-center">
                        <TransitionChild
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0 scale-95"
                            enterTo="opacity-100 scale-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95">
                            <DialogPanel className="w-full relative max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                                {text.title &&
                                    <DialogTitle as="h3" className="text-lg font-medium leading-6 text-gray-900">
                                        {text.title}
                                    </DialogTitle>
                                }
                                <div className="mt-2 overflow-auto mb-28">
                                    <p className="text-sm">
                                        {text.content.split("\\n").map((line, index) => (
                                            <Fragment key={index}>
                                                {line}
                                                <br />
                                            </Fragment>
                                        ))}
                                    </p>
                                </div>

                                <div className="absolute bottom-8 right-8 max-w-[200px] self-end w-full">
                                    <Button color="purple" variant="outline" className="max-w-[200px] self-end w-full" onClick={onClose}>
                                        Close
                                    </Button>
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
}

export default ReadingPassageModal;
