import React from 'react';
import Image from 'next/image';
import AboutIcon from '../assets/images/icon/about-us.ico'
import HomeIcon from '../assets/images/icon/home-icon.ico'
import UseCaseIcon from '../assets/images/icon/use-case.ico'
import PrivacyIcon from '../assets/images/icon/privacy-policy.ico'
import TermsIcon from '../assets/images/icon/term-and-conditions.ico'


function ServiceSideMenu() {

    return (
        <>
            <div className="service-details-sidebar mr-50">

                <div className="service-download-widget">
                    <a href="/">
                        {/* <i className="fal fa-download"></i> */}
                        <Image src={HomeIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
                        <span>Home</span>
                    </a>
                </div>

                <div className="service-download-widget">
                    <a href="/about-us">
                        {/* <i className="fal fa-download"></i> */}
                        <Image src={AboutIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
                        <span>About us</span>
                    </a>
                </div>
                <div className="service-download-widget">
                    <a href="/use-cases">
                        {/* <i className="fal fa-file-pdf"></i> */}
                        <Image src={UseCaseIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
                        <span>Use Cases</span>
                    </a>
                </div>



                <div className="service-download-widget">
                    <a href="/privacy">
                        {/* <i className="fal fa-download"></i> */}
                        <Image src={PrivacyIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
                        <span>Privacy Policy</span>
                    </a>
                </div>
                <div className="service-download-widget">
                    <a href="/terms">
                        {/* <i className="fal fa-file-pdf"></i> */}
                        <Image src={TermsIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
                        <span>Terms of use</span>
                    </a>
                </div>

                <div className="service-category-widget">
                    <ul>
                        <li>
                            Get WrenchBoard App
                        </li>

                        <li>
                            <a href={process.env.NEXT_PUBLIC_APPLE_APP}>
                                <i className="fab fa-apple" /> Download for iOS
                            </a>
                        </li>
                        <li>
                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP}>
                                <i className="fab fa-google-play" /> Download for
                                Android
                            </a>
                        </li>
                    </ul>
                </div>

            </div>


        </>
    );
}

export default ServiceSideMenu;