import React from 'react';
import { ModalConfig } from './core/types';
import ModalFactory from './ModalFactory';

interface TableContent {
    columns: Array<{
        field: string;
        header: string;
    }>;
    data: Array<Record<string, unknown>>;
}

interface ModalContainerProps {
    modals: ModalConfig[];
    onClose: (id: string) => void;
}

const ModalContainer: React.FC<ModalContainerProps> = ({ modals, onClose }) => {
    return (
        <div className="absolute inset-0">
            <style>{`
                .modal-transition {
                    transition: all 0.3s ease-in-out;
                }
            `}</style>
            {modals.map((modal) => (
                <div
                    key={modal.id}
                    className="absolute modal-transition"
                    style={{
                        left: `${modal.position.x}%`,
                        top: `${modal.position.y}%`,
                        width: modal.position.width,
                        height: modal.position.height,
                        transform: 'translate(-50%, -50%)',
                    }}
                >
                    <ModalFactory
                        id={modal.id}
                        type={modal.type}
                        position={modal.position}
                        content={modal.content as TableContent}
                        onClose={onClose}
                    />
                </div>
            ))}
        </div>
    );
};

export default ModalContainer;