import styled from 'styled-components';
import { LinkProps } from '../../interfaces';

export const StyledLink = styled.a<LinkProps>`
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  font-family: ${({ theme }) => theme.fonts.primary}, sans-serif;
  font-weight: ${({ fontWeight }) => fontWeight || '500'};

  ${({ variant, fontSize }) =>
    variant === 'default'
      ? `
				font-size : ${fontSize ? `${fontSize}px` : '14px'};
				letter-spacing: -0.01em;
				line-height: 18px;
			`
      : null}

  ${({ theme, color, variant }) => {
    switch (color) {
      case 'brand':
        return `
						color: ${theme.colors.neutral[700]};
						&:hover {
							color: ${theme.colors.primary[700]};
							${variant === 'inline' ? 'text-decoration: underline' : ''};
						}
						&:active {
							color: ${theme.colors.neutral[700]};
							${variant === 'inline' ? 'text-decoration: underline' : ''};
						}
					`;
      case 'danger':
        return `
						color: ${theme.colors.neutral[700]};
						&:hover {
							color: ${theme.colors.error[700]};
							${variant === 'inline' ? 'text-decoration: underline' : ''};
						}
						&:active {
							color: ${theme.colors.neutral[700]};
							${variant === 'inline' ? 'text-decoration: underline' : ''};
						}
					`;
      case 'light':
        return `
								color: ${theme.colors.neutral[100]};
								&:hover {
									color: ${theme.colors.primary[100]};
									${variant === 'inline' ? 'text-decoration: underline' : ''};
								}
								&:active {
									color: ${theme.colors.neutral[100]};
									${variant === 'inline' ? 'text-decoration: underline' : ''};
								}
							`;
      default:
        return `
						color: ${theme.colors.neutral[700]};
						&:hover {
							color: ${theme.colors.neutral[600]};
							${variant === 'inline' ? 'text-decoration: underline' : ''};
						}
						&:active {
							color: ${theme.colors.neutral[700]};
							${variant === 'inline' ? 'text-decoration: underline' : ''};
						}
					`;
    }
  }}

  margin: ${({ margin }) =>
    margin && `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};

  ${({ uppercase }) =>
    uppercase &&
    `
		text-transform: uppercase;
	`}

  ${({ fontSize }) =>
    fontSize &&
    `
			font-size: ${fontSize}px;
		`}
		
	${({ fontWeight }) =>
    fontWeight &&
    `
			font-weight: ${fontWeight};
		`}

${({ underlined }) =>
    underlined &&
    `
			text-decoration: underline;
		`}
`;