// app/components/Modals/Modal.tsx

import { ModalProps } from "@/app/types";
import React from "react";


interface BaseModalProps extends ModalProps {
    onClose: () => void;
    children: React.ReactNode;
}

export default function Modal({ onClose, children }: BaseModalProps) {
    return (
        <div
            className="fixed inset-0 z-50 bg-black/60 flex justify-center items-center overflow-auto"
            onClick={onClose}
        >
            <div
                className="bg-white p-5 w-[80vw] max-w-max min-w-75 rounded-[15px] relative flex flex-col items-center text-center font-semibold text-[#406185]"
                onClick={(e) => e.stopPropagation()}
            >
                <button
                    className="absolute right-3 top-3 p-2 rounded-full transition-all duration-300 ease-in-out hover:bg-gray-100 hover:rotate-90 active:scale-90 group cursor-pointer"
                    onClick={onClose}
                    aria-label="Stäng"
                >
                    <svg
                        viewBox="0 0 413.348 413.348"
                        className="w-4 h-4 fill-black transition-colors duration-300 group-hover:fill-[#406185]"
                    >
                        <path d="m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z" />
                    </svg>
                </button>
                {children}
            </div>
        </div>
    );
}