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

type WrapperProps = {
  isSelected?: boolean;
  variant: BadgeVariant;
};

export const Wrapper = styled.button<WrapperProps>`
  border-radius: 12px;
  padding: 3px 12px;
  font-size: 14px;
  line-height: 18px;
  transition: 0.3s;
  white-space: nowrap;

  ${({ isSelected, theme, variant }) => {
    switch (variant) {
      case BadgeVariant.FILLED:
        return `border:none; background: ${
          isSelected ? theme.colors.neutral[900] : theme.colors.neutral[100]
        }; ${isSelected && `color: ${theme.colors.neutral[0]};`}
		`;
      case BadgeVariant.OUTLINED:
        return `background: ${theme.colors.neutral[25]}; color: ${
          theme.colors.neutral[600]
        }; border: 1px solid ${
          isSelected ? theme.colors.neutral[600] : theme.colors.neutral[100]
        }`;
    }
  }};

  &:hover {
    transition: 0.3s;
    ${({ theme, variant }) => {
      switch (variant) {
        case BadgeVariant.FILLED:
          return `background: ${theme.colors.neutral[900]}; color: ${theme.colors.neutral[0]};`;
        case BadgeVariant.OUTLINED:
          return `border: 1px solid ${theme.colors.neutral[600]}`;
      }
    }};
  }
`;