import React, { FC, useMemo } from 'react';
import { LinkProps, LinkVariants } from 'types';
import { buttonTextSizeDecorator } from 'utils';
import Text from '../Text';
import * as S from './styles';

const isBlock = (variant?: LinkVariants) =>
	variant === 'button' || variant === 'outlinedButton';

export const Link: FC<LinkProps> = ({
	children,
	external,
	size,
	testId,
	textSize,
	variant,
	weight,
	...rest
}) => {
	const Component = useMemo(
		() => (external ? S.ExternalLink : S.Link),
		[external]
	);
	const block = useMemo(() => isBlock(variant), [variant]);
	const parsedTextSize = useMemo(
		() => (isBlock(variant) ? buttonTextSizeDecorator(size) : textSize),
		[size, textSize, variant]
	);
	return (
		<Component data-testid={testId} {...{ ...rest, size, variant }}>
			{children && (
				<Text
					block={block}
					size={parsedTextSize}
					testId={`${testId}-text`}
					weight={weight}>
					{children}
				</Text>
			)}
		</Component>
	);
};

Link.defaultProps = {
	background: '#851bb7',
	elevation: 4,
	external: true,
	size: 'medium',
	testId: 'link',
	to: '#',
	variant: 'regular',
};

export default Link;