import React from 'react';
import BookingFormModel from '../models/bookingFormModel';
export default function Banner({ BannerData }) {

    console.log("BannerData", BannerData?.banner_image)
    const [showForm, setShowForm] = React.useState(false);

    const handleOpenModel = () => {
        setShowForm(true);
    };

    const handleCloseModel = () => {
        setShowForm(false);
    };

  

    return (
        <>
            <section className="banner" style={{ backgroundImage:`url('${BannerData?.banner_image}')`,  backgroundSize: 'cover',
                    backgroundPosition: 'center' }}>
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-12">
                            <div className="banner-text">
                                <span className="small-text">{BannerData?.banner_heading}</span>
                                <h1>{BannerData?.banner_subheading}</h1>
                                <p>{BannerData?.banner_description}</p>
                                <p></p>
                                <div className="about-button-group">
                                    <a href="#" className="btn btn-sm style-skew" onClick={handleOpenModel}><span>Book Taxi</span></a>
                                    <div className="call-btn"><a href="tel:(+91)9825476243" className="btn-icon ripple"><i
                                        className="fas fa-phone-alt"></i></a>
                                        <a href="tel:(+91)9825476243" className="btn-title">(+91){BannerData?.user.phone_number}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            {showForm && (
                <>
                    <div className="modal-backdrop fade show"></div>
                    <BookingFormModel onClose={handleCloseModel} vehicleData={BannerData.user.transporters[0].vehicle}/>
                </>
            )}
        </>

    );
}