import { colorVariants } from '../colorVariants'

import type { NucleoIconProps } from '../../icon'

function BowlingPins(props: NucleoIconProps) {
  const fill = props.color ? colorVariants[props.color] : 'currentColor'
  const strokewidth = props.strokewidth || 2
  const width = props.size || '1em'
  const height = props.size || '1em'

  return (
    <svg
      height={height}
      width={width}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g
        fill={fill}
        strokeLinecap="round"
        strokeLinejoin="round"
        transform="translate(0.25 0.25)"
      >
        <path
          d="M18.575,23A13.8,13.8,0,0,0,20,16.5c0-4-2-6-2-9,0-2.5.5-2.5.5-4a2.5,2.5,0,0,0-5,0c0,1.5.5,1.5.5,4,0,3-2,5-2,9A13.8,13.8,0,0,0,13.425,23Z"
          fill="none"
          stroke={fill}
          strokeWidth={strokewidth}
        />
        <path
          d="M9.952,11.247a7.883,7.883,0,0,1-.7-2.929c0-2.045.438-2.045.438-3.273A2.121,2.121,0,0,0,7.5,3,2.121,2.121,0,0,0,5.312,5.045c0,1.228.438,1.228.438,3.273C5.75,10.773,4,12.409,4,15.682A10.7,10.7,0,0,0,5.247,21H10"
          fill="none"
          stroke={fill}
          strokeWidth={strokewidth}
        />
      </g>
    </svg>
  )
}

export default BowlingPins
