import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root'); 

function AuthModal({ isOpen, onRequestClose, onLogin }) {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [isLogin, setIsLogin] = useState(true); 

    const modalStyles = {
        overlay: {
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            zIndex: 1000 
        },
        content: {
            top: '50%',
            left: '50%',
            right: 'auto',
            bottom: 'auto',
            marginRight: '-50%',
            transform: 'translate(-50%, -50%)',
            padding: '20px',
            width: '300px',
            borderRadius: '8px',
            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
            border: 'none'
        }
    };

    const formStyles = {
        display: 'flex',
        flexDirection: 'column',
        gap: '15px'
    };

    const inputStyles = {
        padding: '10px',
        borderRadius: '4px',
        border: '1px solid #ccc',
        fontSize: '16px'
    };

    const buttonStyles = {
        padding: '12px',
        borderRadius: '4px',
        border: 'none',
        backgroundColor: '#242323',
        color: 'white',
        fontSize: '16px',
        cursor: 'pointer',
        ':hover': {
            backgroundColor: '#0056b3'
        }
    };

    const toggleButtonStyles = {
        background: 'none',
        border: 'none',
        color: '#007bff',
        cursor: 'pointer',
        fontSize: '14px',
        textDecoration: 'underline'
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onLogin(username, password);
    };

    return (
        <Modal
            isOpen={isOpen}
            onRequestClose={onRequestClose}
            style={modalStyles}
            contentLabel={isLogin ? "Login Modal" : "Register Modal"}
        >
            <h2>{isLogin ? 'Login' : 'Register'}</h2>
            <form style={formStyles} onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="Username"
                    value={username}
                    onChange={e => setUsername(e.target.value)}
                    style={inputStyles}
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                    style={inputStyles}
                />
                <button type="submit" style={buttonStyles}>
                    {isLogin ? 'Login' : 'Register'}
                </button>
            </form>
            <button style={toggleButtonStyles} onClick={() => setIsLogin(!isLogin)}>
                {isLogin ? 'Create an account' : 'Already have an account?'}
            </button>
        </Modal>
    );
}

export default AuthModal;