import styled from 'styled-components';
import { Link as RouterLink } from 'react-router-dom';
import { LinkProps } from 'types';
import {
	button,
	outlinedButton,
	regular,
	roundButton,
	roundOutlinedButton,
	unstyled,
} from './variants';

const applyVariantStyling = (props: LinkProps) => {
	switch (props.variant) {
		case 'unstyled':
			return unstyled;
		case 'roundButton':
			return roundButton(props);
		case 'roundOutlinedButton':
			return roundOutlinedButton(props);
		case 'outlinedButton':
			return outlinedButton(props);
		case 'button':
			return button(props);
		case 'regular':
		default:
			return regular(props);
	}
};

export const ExternalLink = styled.a.attrs((props: LinkProps) => ({
	href: props.to,
}))<LinkProps>`
	${props => applyVariantStyling(props)}
`;

export const Link = styled(RouterLink)<LinkProps>`
	${props => applyVariantStyling(props)}
`;