import styled from 'styled-components/native';
import { colors, theme } from 'data/dataMx';

interface IStylesProps {
  backgroundColor?: colors;
  width?: string;
  height: string;
}

export const TagContainer = styled.View`
  background-color: ${({ backgroundColor }: IStylesProps) =>
    backgroundColor ? backgroundColor : theme.neutral100};
  border-radius: 64px;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  align-items: center;
  border: 1px solid
    ${({ backgroundColor }: IStylesProps) =>
      backgroundColor ? backgroundColor : theme.neutral700};
  color: ${theme.neutral100};
  font-size: 16px;
  font-weight: 700;
  height: ${({ height }: IStylesProps) => height};
  letter-spacing: 0.1px;
  line-height: 16px;
  width: ${({ width }: IStylesProps) => (width ? width : 'auto')};
  padding: 9px 6px;
`;
export const IconContainer = styled.View`
  margin-left: 5px;
  margin-right: 5px;
`;
