import styled, { css } from 'styled-components';
import { getFontSize, getColorAlias, convertToTransientProps, getSpacing } from '../../utils/index.js';
import { getLinkColor } from './utils.js';

const LinkWrapper = styled.a `
  display: ${({ type }) => (type === 'inline' ? 'inline-block' : 'block')};
  color: ${({ variant }) => variant && getLinkColor(variant)};
  width: fit-content;
  ${({ size }) => size === 'small' ? getFontSize('size14') : getFontSize('size16')};
  font-weight: ${({ bold, theme }) => bold && theme.font.weightBold};
  text-decoration: ${({ underlined }) => (underlined ? 'underline' : 'none')};

  &:hover,
  &:active {
    text-decoration: ${({ underlined }) => (underlined ? 'none' : 'underline')};
  }

  &:focus-within,
  &:focus,
  &:focus-visible,
  &:active {
    outline: none;
    border-color: ${getColorAlias('focusOuter')};
    box-shadow: 0 0 0 2px ${getColorAlias('contentLinkDistinct')};
    border-radius: ${(props) => props.theme.radius.roundedA};
  }

  &:visited {
    color: ${getColorAlias('contentLinkVisited')};

    svg {
      fill: ${getColorAlias('contentLinkVisited')};
    }
  }
`;
const LinkContent = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'iconModifiers',
    ]),
}) `
  display: flex;
  align-items: center;
  flex-direction: ${({ iconModifiers }) => iconModifiers === 'leading' && 'row-reverse'};

  svg {
    fill: ${({ variant }) => variant && getLinkColor(variant)};

    ${({ iconModifiers }) => iconModifiers === 'trailing'
    ? css `
            margin: 0 0 0 ${getSpacing('s01')};
          `
    : css `
            margin: 0 ${getSpacing('s01')} 0 0;
          `}
  }
`;

export { LinkContent, LinkWrapper };
