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

import { IChip } from './Chip.interface'
import { colors } from '@/styles/variables'

const isSelectedCss = css`
  background-color: ${colors.white};
  color: ${colors.gray90};
  &:hover {
    background-color: ${colors.white};
  }
`
const disabledCss = css`
  cursor: unset;
  background-color: ${colors.gray70};
  border: 1px solid ${colors.gray70};
`



export const StyledChip = styled.div<IChip>`
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;

  color: ${colors.white};
  border: 1px solid ${colors.white};
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: 800ms;
  &:hover {
    background-color:   ${({ disabled }) => !disabled && css`${colors.gray70}`};
  }
  ${({ selected, disabled }) => selected && !disabled && isSelectedCss};
  ${({ disabled }) => disabled && disabledCss};
`