import React from 'react'
import { Link, NavLink, useNavigate, useParams } from 'react-router-dom'




const TopBar = () => {
    const {project_id} = useParams();
    const navigate = useNavigate();
    const DoNavigate = (route) => {
        navigate(route);
    }
    return (
        <div className="d-flex profile-wrapper">
            <ul className="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                <li className="nav-item" role="presentation">
                    <NavLink to={'/ProjectProfile'} onClick={() => DoNavigate(`/ProjectProfile/${project_id}`)} className="nav-link fs-14" data-bs-toggle="tab" href="#overview-tab" role="tab" aria-selected="true">
                        <i className="ri-airplay-fill d-inline-block d-md-none" /> <span className="d-none d-md-inline-block">Overview</span>
                    </NavLink>
                </li>
                <li className="nav-item" role="presentation">
                    <NavLink to={'/Documents'} onClick={() => DoNavigate(`/Documents/${project_id}`)} className="nav-link fs-14" data-bs-toggle="tab" href="#documents" role="tab" aria-selected="false" tabIndex={-1}>
                        <i className="ri-folder-4-line d-inline-block d-md-none" /> <span className="d-none d-md-inline-block">Documents</span>
                    </NavLink>
                </li>
                <li className="nav-item" role="presentation">
                    <NavLink to={'/ContractorList'} onClick={() => DoNavigate(`/ContractorList/${project_id}`)} className="nav-link fs-14" data-bs-toggle="tab" href="#contractor" role="tab" aria-selected="false" tabIndex={-1}>
                        <i className="ri-list-unordered d-inline-block d-md-none" /> <span className="d-none d-md-inline-block">Contractor List</span>
                    </NavLink>
                </li>
                <li className="nav-item" role="presentation">
                    <NavLink to={'/ConsultantList'} onClick={() => DoNavigate(`/ConsultantList/${project_id}`)} className="nav-link fs-14" data-bs-toggle="tab" href="#consultant" role="tab" aria-selected="false" tabIndex={-1}>
                        <i className="ri-list-unordered d-inline-block d-md-none" /> <span className="d-none d-md-inline-block">Consultant List</span>
                    </NavLink>
                </li>
                <li className="nav-item" role="presentation">
                    <NavLink to={'/Gallery'} onClick={() => DoNavigate(`/Gallery/${project_id}`)} className="nav-link fs-14" data-bs-toggle="tab" href="#Gallery" role="tab" aria-selected="false" tabIndex={-1}>
                        <i className="ri-folder-4-line d-inline-block d-md-none" /> <span className="d-none d-md-inline-block">Gallery</span>
                    </NavLink>
                </li>
                {/* <li className="nav-item" role="presentation">
                    <NavLink to={'/Task'} onClick={() => DoNavigate(`/Task/${project_id}`)} className="nav-link fs-14" data-bs-toggle="tab" href="#Task" role="tab" aria-selected="false" tabIndex={-1}>
                        <i className="ri-folder-4-line d-inline-block d-md-none" /> <span className="d-none d-md-inline-block">Task</span>
                    </NavLink>
                </li> */}
            </ul>
           
        </div>
    )
}

export default TopBar