import { createComponent } from "./create-component"

export const ProgressCircleAnatomy = createComponent((props) => {
  const { palette, ...rest } = props
  return (
    <svg
      width={400}
      height={300}
      viewBox="0 0 400 300"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <circle
        cx={199.5}
        cy={150.5}
        r={29}
        stroke={palette[2]}
        strokeWidth={7}
      />
      <mask id="path-2-inside-1_1882_272" fill={palette[0]}>
        <path d="M199.5 118C204.612 118 209.652 119.206 214.21 121.519C218.768 123.833 222.716 127.189 225.734 131.316C228.751 135.442 230.753 140.222 231.576 145.267C232.399 150.312 232.02 155.48 230.471 160.351C228.921 165.223 226.245 169.66 222.658 173.302C219.072 176.945 214.677 179.69 209.83 181.315C204.983 182.939 199.822 183.398 194.764 182.653C189.707 181.908 184.897 179.981 180.724 177.028L184.762 171.323C188.037 173.641 191.813 175.153 195.783 175.738C199.752 176.323 203.804 175.963 207.608 174.687C211.413 173.412 214.863 171.257 217.678 168.398C220.493 165.539 222.594 162.056 223.81 158.233C225.026 154.409 225.324 150.352 224.677 146.392C224.031 142.432 222.46 138.68 220.092 135.442C217.723 132.203 214.624 129.568 211.046 127.752C207.468 125.936 203.512 124.99 199.5 124.99L199.5 118Z" />
      </mask>
      <path
        d="M199.5 118C204.612 118 209.652 119.206 214.21 121.519C218.768 123.833 222.716 127.189 225.734 131.316C228.751 135.442 230.753 140.222 231.576 145.267C232.399 150.312 232.02 155.48 230.471 160.351C228.921 165.223 226.245 169.66 222.658 173.302C219.072 176.945 214.677 179.69 209.83 181.315C204.983 182.939 199.822 183.398 194.764 182.653C189.707 181.908 184.897 179.981 180.724 177.028L184.762 171.323C188.037 173.641 191.813 175.153 195.783 175.738C199.752 176.323 203.804 175.963 207.608 174.687C211.413 173.412 214.863 171.257 217.678 168.398C220.493 165.539 222.594 162.056 223.81 158.233C225.026 154.409 225.324 150.352 224.677 146.392C224.031 142.432 222.46 138.68 220.092 135.442C217.723 132.203 214.624 129.568 211.046 127.752C207.468 125.936 203.512 124.99 199.5 124.99L199.5 118Z"
        stroke={palette[3]}
        strokeWidth={14}
        mask="url(#path-2-inside-1_1882_272)"
      />
    </svg>
  )
})
