import React, { ReactNode } from 'react';
import { ModalConfig } from '../core/types';
import { useModal } from '../context/ModalContext';

interface ModalProps extends Omit<ModalConfig, 'content'> {
    content: ReactNode;
}

export const Modal: React.FC<ModalProps> = ({
    id,
    type,
    position,
    style,
    content
}) => {
    const { removeModal } = useModal();

    const handleClose = () => {
        removeModal(id);
    };

    return (
        <div
            className="absolute"
            style={{
                top: `${position.y}%`,
                left: `${position.x}%`,
                width: position.width,
                height: position.height,
                transform: 'translate(-50%, -50%)',
                backgroundColor: 'white',
                borderRadius: '8px',
                boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column'
            }}
        >
            <div className="flex justify-between items-center p-4 border-b">
                <h2 className="text-lg font-semibold">Data Table</h2>
                <button
                    onClick={handleClose}
                    className="p-1 hover:bg-gray-100 rounded-full"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                </button>
            </div>
            <div className="flex-1 overflow-auto p-4">
                {content}
            </div>
        </div>
    );
}; 