import styled from 'styleh-components'
import { MaterialIcon } from '../MaterialIcon'

// NOTE:  utility function to simplify creation of icons with various sizes and fills...
const styledMaterialIcon = (
  size: number,
  fill: string = '',
  opacity: number = -1
) => {
  const cssSize =
    size && size !== 24
      ? styled.css`
          width: ${size}px;
          height: ${size}px;
        `
      : ''
  // NOTE:  only enable opacity if it falls in this range...
  const cssOpacity =
    opacity && opacity > 0 && opacity < 1
      ? styled.css`
          opacity: ${opacity};
        `
      : ''
  const cssFill =
    fill && fill !== ''
      ? styled.css`
          g {
            fill: ${fill};
          }
        `
      : ''

  return styled.withComponent(MaterialIcon)`
    ${cssSize}
    ${cssOpacity}
    ${cssFill}
  `
}

export { styledMaterialIcon }