import styled from 'styled-components';

type StyledChipProps = {
  selected?: boolean;
  cursor?: string;
  fullWidth?: boolean;
  borderColor?: string;
};

export const StyledChip = styled.div<StyledChipProps>`
  margin: 4px;
  padding: 0 12px;
  height: 34px;
  cursor: ${({ cursor }) => cursor || 'pointer'};
  border: 1px solid
    ${({ selected, theme }) =>
      selected ? theme.colors.neutral[800] : theme.colors.neutral[200]};
  border-radius: 50px;
  background: ${({ selected, theme }) =>
    selected ? theme.colors.neutral[900] : theme.colors.neutral[25]};
  color: ${({ selected }) => (selected ? 'white' : 'black')};
  font-weight: 400;
  font-family: ${({ theme }) => theme.fonts.primary};
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'min-content')};
  white-space: nowrap;
  user-select: none;

  ${({ borderColor }) => borderColor && `border-color: ${borderColor}`};

  svg {
    margin: 0 0 0 10px;
  }
`;