import React, { useCallback } from 'react';
import { Text, BoxProps, color } from '@stacks/ui';

interface LinkProps extends BoxProps {
  _hover?: BoxProps;
  onClick: () => void;
}

export const buildEnterKeyEvent = (onClick: () => void) => {
  return useCallback(
    (event: React.KeyboardEvent) => {
      if (event.key === 'Enter' && onClick) {
        onClick();
      }
    },
    [onClick]
  );
};

export const Link: React.FC<LinkProps> = ({
  _hover = {},
  children,
  fontSize = '12px',
  textStyle = 'caption.medium',
  onClick,
  ...rest
}) => (
  <Text
    _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }}
    fontSize={fontSize}
    textStyle={textStyle}
    color={color('brand')}
    onKeyPress={buildEnterKeyEvent(onClick)}
    onClick={onClick}
    tabIndex={0}
    {...rest}
  >
    {children}
  </Text>
);

export const MediumLink: React.FC<LinkProps> = ({ children, fontSize = '14px', ...rest }) => (
  <Link fontSize={fontSize} {...rest}>
    {children}
  </Link>
);
