import { colorVariants } from '../colorVariants'

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

function RecordPlayer3(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 9V14L16.5 16"
          fill="none"
          stroke={fill}
          strokeWidth={strokewidth}
        />
        <path
          d="M2 6L2 18C2 19.1046 2.89543 20 4 20L20 20C21.1046 20 22 19.1046 22 18L22 6C22 4.89543 21.1046 4 20 4L4 4C2.89543 4 2 4.89543 2 6Z"
          fill="none"
          stroke={fill}
          strokeWidth={strokewidth}
        />
        <path
          d="M10 16C12.2091 16 14 14.2091 14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 14.2091 7.79086 16 10 16Z"
          fill="none"
          stroke={fill}
          strokeWidth={strokewidth}
        />
        <path
          d="M10 13C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13Z"
          fill={fill}
          stroke="none"
        />
      </g>
    </svg>
  )
}

export default RecordPlayer3
