import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Box, Button } from "@mui/material";

const NavigationTab: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();

    // Define routes and their display names
    const tabs = [
        { name: "home", path: "/home" },
        { name: "User Management", path: "/usermanagement" },
        { name: "Vehicle Management", path: "/vehiclemanagement" },
        { name: "Model Management", path: "/modelmanagement" },
        // { name: "Password Request", path: "/passwordreqmanagement" },
    ];

    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                backgroundColor: "transparent",
                padding: "20px",
            }}
        >
            {tabs.map((tab) => (
                <Button
                    key={tab.path}
                    sx={{
                        color: location.pathname === tab.path ? "green" : "white",
                        background: location.pathname === tab.path ? "#ffffff9e" : "transparent",
                        mx: 2,
                        fontWeight: location.pathname === tab.path ? "bold" : "normal",
                    }}
                    variant="text"
                    onClick={() => navigate(tab.path)}
                >
                    {tab.name}
                </Button>
            ))}
        </Box>
    );
};

export default NavigationTab;
