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

export default function FilledDiscount({ color, size }: NucleoIconProps) {
  const fill = color ? colorVariants[color] : 'currentColor'
  const width = size || '1em'
  const height = size || '1em'

  return (
    <svg
      height={height}
      width={width}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g fill={fill}>
        <path
          d="M23.707,11.293L21,8.586V4c0-0.552-0.448-1-1-1h-4.586l-2.707-2.707c-0.391-0.391-1.023-0.391-1.414,0 L8.586,3H4C3.448,3,3,3.448,3,4v4.586l-2.707,2.707c-0.391,0.391-0.391,1.023,0,1.414L3,15.414V20c0,0.552,0.448,1,1,1h4.586 l2.707,2.707C11.488,23.902,11.744,24,12,24s0.512-0.098,0.707-0.293L15.414,21H20c0.552,0,1-0.448,1-1v-4.586l2.707-2.707 C24.098,12.316,24.098,11.684,23.707,11.293z M8.5,7C9.328,7,10,7.672,10,8.5S9.328,10,8.5,10S7,9.328,7,8.5S7.672,7,8.5,7z M15.5,17c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S16.328,17,15.5,17z M8,17.414L6.586,16L16,6.586 L17.414,8L8,17.414z"
          fill={fill}
        />
      </g>
    </svg>
  )
}