import styled, { css } from 'styled-components';

import { ISocialLinks } from './SocialLinks.interface';
import { colors } from '@/styles/variables';

export const StyledSocialLinks = styled.ul<ISocialLinks>`
  display: flex;
  align-items: center;
  gap: 12px;

  & li{
    & a{
      display: flex;
      align-items: center;
      justify-content: center;

      width: 2.8rem;
      height: 2.8rem;
      border-radius: 50%;
      text-align: center;

      transition: all 0.3s linear;

      &:hover{
        opacity: 0.6;
      }
    }

    & i{
      font-size: 1.6rem;
    }
  }

  ${(props) => {
    switch (props.variant) {
      case "light": default:
        return css`
          & li a{
            color: ${colors.white};
            background-color: ${colors.primary70};
          }
        `;
      case "dark":
        return css`
          & li a{
            color: ${colors.primary70};
            background-color: ${colors.white};
          }
        `;
    }
  }}
`;