import React from 'react'

/**
 * A component to render a circle inside a FreeSewing pattern
 *
 * @component
 * @param {object} props - All component props
 * @param {object} props.point - The point that holds the circle info
 * @returns {JSX.Element}
 */
export const Circle = ({ point }) =>
  point.attributes.list['data-circle'].map((r, i) => {
    const circleProps = point.attributes.circleProps
    const extraProps = {}
    for (const prop in circleProps) {
      const val = point.attributes.list[`data-circle-${prop === 'className' ? 'class' : prop}`]
      if (val.length >= i) extraProps[prop] = val[i]
      else extraProps[prop] = val.join(' ')
    }

    return <circle key={r} cx={point.x} cy={point.y} r={r} {...extraProps} />
  })