import React, { useState } from 'react';
import {
    MDBBtn,
    MDBContainer,
    MDBCard,
    MDBCardBody,
    MDBCol,
    MDBRow,
    MDBInput,
    MDBCheckbox,
    MDBIcon
} from 'mdb-react-ui-kit';

function App() {
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        subscribe: false // For newsletter subscription
    });

    const handleChange = (e: any) => {
        const { name, value, type, checked } = e.target;
        const val = type === 'checkbox' ? checked : value;

        setFormData(prevState => ({
            ...prevState,
            [name]: val
        }));
    };

    const handleSubmit = (e: any) => {
        e.preventDefault();
        console.log('Form submitted with:', formData);
        // Add your form submission logic here
    };

    return (
        <MDBContainer fluid>
            <div className="p-5 bg-image" style={{ backgroundImage: 'url(https://mdbootstrap.com/img/new/textures/full/171.jpg)', height: '300px' }}></div>

            <MDBCard className='mx-5 mb-5 p-5 shadow-5' style={{ marginTop: '-100px', background: 'hsla(0, 0%, 100%, 0.8)', backdropFilter: 'blur(30px)' }}>
                <MDBCardBody className='p-5 text-center'>

                    <h2 className="fw-bold mb-5">Sign up now</h2>

                    <MDBRow>
                        <MDBCol col='6'>
                            <MDBInput wrapperClass='mb-4' label='First name' id='firstName' name='firstName' type='text' value={formData.firstName} onChange={handleChange} />
                        </MDBCol>

                        <MDBCol col='6'>
                            <MDBInput wrapperClass='mb-4' label='Last name' id='lastName' name='lastName' type='text' value={formData.lastName} onChange={handleChange} />
                        </MDBCol>
                    </MDBRow>

                    <MDBInput wrapperClass='mb-4' label='Email' id='email' name='email' type='email' value={formData.email} onChange={handleChange} />
                    <MDBInput wrapperClass='mb-4' label='Password' id='password' name='password' type='password' value={formData.password} onChange={handleChange} />

                    <div className='d-flex justify-content-center mb-4'>
                        <MDBCheckbox name='subscribe' id='subscribe' label='Subscribe to our newsletter' checked={formData.subscribe} onChange={handleChange} />
                    </div>

                    <MDBBtn className='w-100 mb-4' size='sm' onClick={handleSubmit}>sign up</MDBBtn>

                    <div className="text-center">
                        <p>or sign up with:</p>

                        <MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
                            <MDBIcon fab icon='facebook-f' size="sm" />
                        </MDBBtn>

                        <MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
                            <MDBIcon fab icon='twitter' size="sm" />
                        </MDBBtn>

                        <MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
                            <MDBIcon fab icon='google' size="sm" />
                        </MDBBtn>

                        <MDBBtn tag='a' color='none' className='mx-3' style={{ color: '#1266f1' }}>
                            <MDBIcon fab icon='github' size="sm" />
                        </MDBBtn>
                    </div>

                </MDBCardBody>
            </MDBCard>

        </MDBContainer>
    );
}

export default App;