import React from 'react';
import VideoModal from '@/components/models/videoModel';

export default function About({AboutData}) {
   
    
    const [showModel, setShowModel] = React.useState(false);

    const handleShowModel = () =>{
        setShowModel(true);
       
    } 
    const handleCloseModel = () => {
        setShowModel(false);
      
    } 

    const exp_year = new Date().getFullYear() - (AboutData?.starting_year || 0);
    const happy_customers = AboutData?.happy_customers || 0;
    const client_rating = AboutData?.client_rating || 0;

    const driver_age = new Date().getFullYear() - new Date(AboutData?.driver_dob).getFullYear();
    
 
    return (
        <>
        <div id="about_me">
            <section className="about">
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-12">
                            <div className="about-wrap">
                                <div className="row">
                                    <div className="col-lg-6 col-md-12 col-sm-12 col-12">
                                        <div className="about-wrap-images">
                                            <div className="about-wrap-info">
                                                <h2>{AboutData?.starting_year}</h2>
                                                <p>STARTED <br /> JOURNEY</p>
                                            </div>
                                            <div className="about-img-1">
                                                <img src={AboutData?.driver_photo} alt="Skill Image" />
                                            </div>

                                            <div className="overlay_play">
                                                <div className="video-play-btn ripple">
                                                    <a  className="play-btn" onClick={handleShowModel}>
                                                        <i className="far fa-play-circle" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="col-lg-6 col-md-12 col-sm-12 col-12">
                                        <div className="about-wrap-text">
                                            <span className="small-text">About Me</span>
                                            <h2>Personal Information</h2>

                                            <div className="about-list-wrapper">
                                                <table className="about-list">
                                                    <tbody>
                                                        <tr>
                                                            <td className="title">Full Name</td>
                                                            <td>: {AboutData?.user.name} {AboutData?.user.last_name}</td>
                                                        </tr>
                                                        <tr>
                                                            <td className="title">Age</td>
                                                            <td>: {driver_age} Years</td>
                                                        </tr>
                                                        <tr>
                                                            <td className="title">Language</td>
                                                            <td>: {AboutData?.languages[0].name}</td>
                                                            
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div className="about-line"></div>
                                                <table className="about-list">
                                                    <tbody>
                                                        <tr>
                                                            <td className="title">Address</td>
                                                            <td>: {AboutData?.driver_address} </td>
                                                        </tr>
                                                        <tr>
                                                            <td className="title">Phone</td>
                                                            <td>: {AboutData?.driver_phone_number}</td>
                                                        </tr>
                                                        <tr>
                                                            <td className="title">Email</td>
                                                            <td>: {AboutData?.driver_email}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div className="about-counter-wrap">
                                                <div className="about-counter wow fadeInUp" style={{ visibility: 'visible', animationName: 'fadeInUp' }}>
                                                    <h3 className="about-counter_number"><span className="counter-number">{exp_year}</span><span className="text">+</span></h3>
                                                    <p className="about-counter_text">Years of Experience</p>
                                                </div>
                                                <div className="about-counter wow fadeInUp" style={{ visibility: 'visible', animationName: 'fadeInUp' }}>
                                                    <h3 className="about-counter_number"><span className="counter-number">{happy_customers}</span><span className="text">k</span></h3>
                                                    <p className="about-counter_text">Happy Customers</p>
                                                </div>
                                                <div className="about-counter wow fadeInUp" style={{ visibility: 'visible', animationName: 'fadeInUp' }}>
                                                    <h3 className="about-counter_number">{client_rating}<span className="text">/</span>10<span className="text"></span></h3>
                                                    <p className="about-counter_text">Personal Rating</p>
                                                </div>
                                            </div>

                                            <div className="about-button-group">
                                                <a href="#" className="btn btn-sm style-skew-1"><span>Download CV <i className="fas fa-download"></i></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){AboutData?.user.phone_number}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            </div>

            {showModel && <VideoModal handleOnClose={handleCloseModel} video={AboutData?.driver_video}/>}
        </>
    );
}