import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'

export const makeUSemiCircleSMProps = propsFactory(
  {
    shape: {
      type: String,
      default: 'circle',
    },
    size: {
      type: String,
      default: 'sm',
    },
    progressDashoffset: {
      type: Number,
      default: 0,
    },
    progress: {
      type: Number,
      default: 0,
    },

    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'USemiCircleSM'
)

export const USemiCircleSM = genericComponent()({
  name: 'USemiCircleSM',

  props: makeUSemiCircleSMProps(),

  setup(props) {
    return () =>
      props.shape === 'semi-circle' && props.size === 'sm' ? (
        <svg
          width="200"
          height="190"
          viewBox="0 0 200 190"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M190 100C190 88.181 187.672 76.4778 183.149 65.5585C178.626 54.6392 171.997 44.7177 
          163.64 36.3604C155.282 28.0031 145.361 21.3738 134.442 16.8508C123.522 12.3279 111.819 
          10 100 10C88.181 9.99999 76.4779 12.3279 65.5585 16.8508C54.6392 21.3737 44.7177 28.0031 
          36.3604 36.3604C28.0031 44.7176 21.3738 54.6391 16.8509 65.5584C12.3279 76.4777 10 88.181 
          10 100"
            class="stroke-gray-200"
            stroke-width="20"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M10 100C10 76.1305 19.4821 53.2387 36.3604 36.3604C53.2387 19.4821 76.1305 10 100 
          10C123.869 10 146.761 19.4821 163.64 36.3604C180.518 53.2386 190 76.1305 190 100"
            class="stroke-primary-600"
            stroke-width="20"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-dasharray="360"
            stroke-dashoffset={props.progressDashoffset}
          />
        </svg>
      ) : null
  },
})

export type USemiCircleSM = InstanceType<typeof USemiCircleSM>