import { Text } from '@chakra-ui/react';
import { LinkProps as LinkExtended, Link as TanstackLink } from '@tanstack/react-router';
import { ReactNode } from 'react';

interface LinkProps {
  children: ReactNode;
  to: LinkExtended['to'];
  link?: LinkExtended;
}

export function Link(props: LinkProps) {
  return (
    <TanstackLink {...props}>
      <Text
        color="colorPalette.500"
        _hover={{
          textDecoration: 'underline',
          textDecorationColor: 'colorPalette.700'
        }}
      >
        {props.children}
      </Text>
    </TanstackLink>
  );
}