import Link from "next/link";
import { useRouter } from "next/router";
import React from 'react';

function Sidebar() {
    const router = useRouter();
    return (
        <>
            <div className="sidebar">
                <div className="brand-logo">
                 
                    {/* <Link href="/">
                        <a className="mini-logo">
                            <img src="./images/logoi.png" alt="" width="40" />
                        </a>
                    </Link> */}
                </div>
                <div className="menu">
                    <ul>
                        <li className={`${router.pathname == "/" ? "active" : ""} align-items-center d-flex flex-column justify-content-center`}>
                            <Link href="/">
                              <span>
                              <a>
                                    <span>
                                        <i className="ri-home-5-line"></i>
                                        
                                    </span>
                                
                                  
                                </a>
                                <span className="text-white">Home</span>
                              </span>
                            </Link>
                        </li>
                        <li
                            className={
                               ` align-items-center d-flex flex-column justify-content-center`
                            }
                        >
                            <Link href="/water">
                         
                              <span >
                              <a>
                                    <span>
                                    <i className="fa-solid fa-droplet"></i>
                                    </span>
                                  
                                </a>
                                <span className="text-white">Water</span>
                              </span>
                               
                            </Link>
                        </li>
                       
                       
                       
                        <li
                            className={
                              `align-items-center d-flex flex-column justify-content-center`
                            }
                        >
                            <Link href="/services">
                          
                              <span className="d-flex flex-column align-items-center">
                              <a>
                                    <span>
                                    <i class="fa-solid fa-screwdriver-wrench"></i>
                                    </span>
                                  
                                </a>
                                <span className="text-white">Services</span>
                              </span>
                               
                            </Link>
                        </li>

                        <li
                            className={
                              `${  router.pathname == "/bill"
                              ? "active"
                              : ""} align-items-center d-flex flex-column justify-content-center`
                            }
                        >
                            <Link href="/bill">
                          <span className="d-flex flex-column align-items-center">
                          <a>
                                    <span>
                                        <i className="ri-wallet-line"></i>
                                    </span>
                                  
                                </a>
                                <span className="text-white">Payment</span>
                          </span>
                            </Link>
                        </li>
                        <li
                            className={
                                `${router.pathname == "/signin"
                                ? "active"
                                : " logout"} d-none d-md-block`
                            }
                        >
                            <Link href="/signin">
                                <a>
                                    <span>
                                    <i className="ri-logout-circle-line"></i>
                                    </span>
                                    <span className="nav-text">Signout</span>
                                </a>
                            </Link>
                        </li>
                    </ul>
                </div>

                <div className="card-limit-progress">
                    <div className="d-flex justify-content-between align-items-center mb-3">
                        <div className="flex-grow-2 me-3">
                            <div className="d-flex justify-content-between mb-1">
                                <h5 className="mb-1">Visa</h5>
                                <p className="mb-0">
                                    <strong>75% </strong>
                                </p>
                            </div>
                            <div className="progress">
                                <div
                                    className="progress-bar bg-light"
                                    role="progressbar"
                                    style={{
                                        width: "75%",
                                    }}
                                ></div>
                            </div>
                        </div>
                    </div>
                    <div className="d-flex justify-content-between align-items-center mb-3">
                        <div className="flex-grow-2 me-3">
                            <div className="d-flex justify-content-between mb-1">
                                <h5 className="mb-1">Master</h5>
                                <p className="mb-0">
                                    <strong>65% </strong>
                                </p>
                            </div>
                            <div className="progress">
                                <div
                                    className="progress-bar bg-white"
                                    role="progressbar"
                                    style={{
                                        width: "65%",
                                    }}
                                ></div>
                            </div>
                        </div>
                    </div>
                    <div className="d-flex justify-content-between align-items-center mb-3">
                        <div className="flex-grow-2 me-3">
                            <div className="d-flex justify-content-between mb-1">
                                <h5 className="mb-1">Paypal</h5>
                                <p className="mb-0">
                                    <strong>50% </strong>
                                </p>
                            </div>
                            <div className="progress">
                                <div
                                    className="progress-bar bg-white"
                                    role="progressbar"
                                    style={{
                                        width: "50%",
                                    }}
                                ></div>
                            </div>
                        </div>
                    </div>
                    <div className="d-flex justify-content-between align-items-center mb-2">
                        <div className="flex-grow-2 me-3">
                            <div className="d-flex justify-content-between mb-1">
                                <h5 className="mb-1">Amex</h5>
                                <p className="mb-0">
                                    <strong>20% </strong>
                                </p>
                            </div>
                            <div className="progress">
                                <div
                                    className="progress-bar bg-white"
                                    role="progressbar"
                                    style={{
                                        width: "20%",
                                    }}
                                >

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
export default Sidebar;