import React, { type ReactElement } from 'react';
import { Box, Tab, Tabs } from '@mui/material';
import { useLocation, useNavigate } from 'react-router';

const ValidTabs = ['home', 'career', 'about'] as const satisfies string[];

export function TopBar(): ReactElement {
    const { pathname } = useLocation();
    const navigate = useNavigate();
    const selectedTab =
        ValidTabs.find((tabName) => pathname.toLowerCase().startsWith('/' + tabName)) ??
        ValidTabs[0];

    return (
        <Box sx={{ width: '100%', marginBottom: '10px', boxShadow: '0 3px 5px -5px white' }}>
            <Tabs
                variant='fullWidth'
                centered
                sx={{ fontSize: 32 }}
                value={selectedTab}
                onChange={(_, value) => navigate('/' + value)}
            >
                {ValidTabs.map((tab) => (
                    <Tab key={tab} label={tab} value={tab} />
                ))}
            </Tabs>
        </Box>
    );
}