import { Flex, TabNav, Text } from "@radix-ui/themes";
import { useLocation, useNavigate } from "react-router-dom";

type TTabLink = {
    label: string;
    path: string;
};

export default function TabLink(props: TTabLink) {
    const { pathname } = useLocation();
    const navigate = useNavigate();

    const onClick = () => navigate(props.path);

    return (
        <TabNav.Link active={pathname === props.path} onClick={onClick}>
            <Flex className="items-center gap-1">
                <Text>{props.label}</Text>
            </Flex>
        </TabNav.Link>
    );
}