export default function AvailableVehicleCard({ data,phone,openModel }) {
  
    return (
        <div className="tab-pane fade show active" id="pills-home" role="tabpanel"
            aria-labelledby="pills-home-tab">

            <div className="row">
                <div className="col-lg-2 col-md-4 cil-sm-12 col-12">
                    <div className="taxi-feature">
                        <div className="taxi-feature_icon"><img decoding="async"
                            src="img/fuel.png"
                            alt="taxi_f_1_1 1 2 1" /></div>
                        <span
                            className="taxi-feature_info">{data.fuel_type}</span>
                    </div>
                    <div className="taxi-feature">
                        <div className="taxi-feature_icon"><img decoding="async"
                            src="img\steering-wheel (1).png"
                            alt="taxi_f_1_2 1 2 1" /></div>
                        <span
                            className="taxi-feature_info">{data.transmission_type}</span>
                    </div>
                    <div className="taxi-feature">
                        <div className="taxi-feature_icon"><img decoding="async"
                            src="img/car-seat.png"
                            alt="taxi_f_1_3 1 2 1" /></div>
                        <span
                            className="taxi-feature_info">{data.seating_capacity}</span>
                    </div>
                    <div className="taxi-feature">
                        <div className="taxi-feature_icon"><img decoding="async"
                            src="img/transport copy.png"
                            alt="taxi_f_1_4 1 2 1" /></div>
                        <span className="taxi-feature_info">{data.service_type}</span>
                    </div>

                </div>
                <div className="col-lg-5 col-md-8 cil-sm-12 col-12">
                    <div className="taxi-img"><img decoding="async" src={data.media[0].original_url} alt="taxi_1_2 4 1"/>
                    </div>
                </div>
                <div className="col-lg-4 col-md-12 cil-sm-12 col-12">
                    <div className="taxi-about">
                        <h4 className="taxi-about_title">{data.get_make.name} {data.get_model.name} {data.model_year} </h4>
                        <p className="taxi-about_text">{data.description}</p>
                        <div className="about-button-group">
                            <a  className="btn btn-sm style-skew" onClick={openModel}><span>Book Taxi</span></a> 
                          
                            <div className="call-btn"><a href="tel:+468254762443" className="btn-icon ripple"><i
                                className="fas fa-phone-alt"></i></a>
                                <a href="tel:+468254762443" className="btn-title">(+91){phone}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    );
}