export default function Showcase({ ShowcaseData }) {

    return (
        <section className="my-skills">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-12">
                        <div className="my-skills-wrap">
                            <div className="row">
                                <div className="col-lg-6 col-md-12 col-sm-12 col-12">
                                    <div className="my-skills-text">
                                        <span className="small-text">Showcasing My Skill</span>
                                        <h2>My Professional Skill</h2>

                                        <div className="progress-wrap">
                                            <div className="pbar-mr-1">
                                                <span className="pbar-mr-2">Driving Skills</span>
                                                <span className="pbar-mr-2">{ShowcaseData?.driving_skills}%</span>
                                            </div>
                                            <div className="progress">
                                                <div
                                                    className="progress-bar progress-bar-striped progress-bar-animated"
                                                    role="progressbar"
                                                    style={{ width: `${ShowcaseData?.driving_skills}%` }}
                                                    aria-valuenow={ShowcaseData?.driving_skills}
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                                >
                                                    {ShowcaseData?.driving_skills}%
                                                </div>
                                            </div>
                                        </div>

                                        <div className="progress-wrap">
                                            <div className="pbar-mr-1">
                                                <span className="pbar-mr-2">Vehicle Maintenance</span>
                                                <span className="pbar-mr-2">{ShowcaseData?.Vehicle_Maintenance_Skills}%</span>
                                            </div>
                                            <div className="progress">
                                                <div
                                                    className="progress-bar progress-bar-striped progress-bar-animated"
                                                    role="progressbar"
                                                    style={{ width: `${ShowcaseData?.Vehicle_Maintenance_Skills}%` }}
                                                    aria-valuenow={ShowcaseData?.Vehicle_Maintenance_Skills}
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                                >
                                                    {ShowcaseData?.Vehicle_Maintenance_Skills}%
                                                </div>
                                            </div>
                                        </div>

                                        <div className="progress-wrap">
                                            <div className="pbar-mr-1">
                                                <span className="pbar-mr-2">Navigation Skills</span>
                                                <span className="pbar-mr-2">{ShowcaseData?.navigation_skills}%</span>
                                            </div>
                                            <div className="progress">
                                                <div
                                                    className="progress-bar progress-bar-striped progress-bar-animated"
                                                    role="progressbar"
                                                    style={{ width: `${ShowcaseData?.navigation_skills}%` }}
                                                    aria-valuenow={ShowcaseData?.navigation_skills}
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                                >
                                                    {ShowcaseData?.navigation_skills}%
                                                </div>
                                            </div>
                                        </div>

                                        <div className="progress-wrap">
                                            <div className="pbar-mr-1">
                                                <span className="pbar-mr-2">Time Management</span>
                                                <span className="pbar-mr-2">{ShowcaseData?.time_management}%</span>
                                            </div>
                                            <div className="progress">
                                                <div
                                                    className="progress-bar progress-bar-striped progress-bar-animated"
                                                    role="progressbar"
                                                    style={{ width: `${ShowcaseData?.time_management}%` }}
                                                    aria-valuenow={ShowcaseData?.time_management}
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                                >
                                                    {ShowcaseData?.time_management}%
                                                </div>
                                            </div>
                                        </div>

                                        <div className="skills-text-1">
                                            <h3>Additional Skills</h3>
                                            <p>
                                                {ShowcaseData?.additional_skill_description}
                                            </p>
                                        </div>
                                        {/* 
                                        <div className="feature-circle-wrap">
                                            <div className="feature-circle">
                                                <div className="circle-num">
                                                    <div className="progress-bar" style={{ "--percentage": `${ShowcaseData?.languages[0].Proficient}%` }}>
                                                        <div className="progress-circle"></div>
                                                    </div>
                                                    {ShowcaseData?.languages[0]?.Proficient}%<br></br>
                                                    {ShowcaseData?.languages[0]?.name}
                                                </div>
                                            </div>
                                            
                                             <div className="feature-circle">
                                                <div className="circle-num">{ShowcaseData?.languages[1]?.Proficient}%<br></br>
                                                    {ShowcaseData?.languages[1]?.name}</div>
                                            </div>

                                            <div className="feature-circle">
                                                <div className="circle-num">{ShowcaseData?.languages[2]?.Proficient}%<br></br>
                                                    {ShowcaseData?.languages[2]?.name}</div>
                                            </div> 
                                        </div> */}
                                        <div className="feature-circle-wrap">
                                            {ShowcaseData?.languages?.slice(0, 3).map((language, index) => (
                                                <div key={index} className="feature-circle">
                                                    <div className="circle-num">
                                                        <div className="progress-bar" style={{ "--percentage": `${language?.Proficient}%` }}>
                                                            <div className="progress-circle"></div>
                                                        </div>
                                                        {language?.Proficient}%<br />
                                                        {language?.name}
                                                    </div>
                                                </div>
                                            ))}
                                        </div>

                                    </div>
                                </div>

                                <div className="col-lg-6 col-md-12 col-sm-12 col-12">
                                    <div className="my-skills-image">
                                        <img className="w-100" src={ShowcaseData?.driver_photo} alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        </section >
    );
}