import { styled } from 'styleh-components'
import { IconWrapperProps } from './typings'

const iconColor = (props: IconWrapperProps) => {
  const pointer = props.isInteractive
    ? props.isDisabled
      ? 'no-drop'
      : 'pointer'
    : 'default'
  return props.isDisabled
    ? styled.css`
        cursor: ${pointer};
        fill: #b1b1b1;
      `
    : props.isSelected
      ? styled.css`
          cursor: ${pointer};
          fill: #006caf;
        `
      : styled.css`
          cursor: ${pointer};
          fill: #292929;
        `
}

const Wrapper = styled.i`
  width: 24px;
  height: 24px;
  display: inline-block;

  ${(props: IconWrapperProps) => iconColor(props)};
`

export { Wrapper }
export default Wrapper