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

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

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

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

  props: makeUSemiCircleXXSProps(),

  setup(props) {
    return () =>
      props.shape === 'semi-circle' && props.size === 'xxs' ? (
        <svg
          width="64"
          height="64"
          viewBox="0 0 64 64"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M61 32C61 28.1917 60.2499 24.4206 58.7925 20.9022C57.3351 17.3837 55.199 14.1868 
            52.5061 11.4939C49.8132 8.80101 46.6163 6.66488 43.0978 5.20749C39.5794 3.75011 
            35.8083 3 32 3C28.1917 3 24.4206 3.7501 20.9022 5.20749C17.3838 6.66487 14.1868 8.80099 
            11.4939 11.4939C8.80101 14.1868 6.66489 17.3837 5.2075 20.9022C3.75011 24.4206 3 
            28.1917 3 32"
            class="stroke-gray-200"
            stroke-width="6"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M3 32C3 24.3087 6.05535 16.9325 11.4939 11.4939C16.9325 6.05535 24.3087 3 32 
            3C39.6913 3 47.0675 6.05535 52.5061 11.4939C57.9446 16.9325 61 24.3087 61 32"
            class="stroke-primary-600"
            stroke-width="6"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-dasharray="360"
            stroke-dashoffset={props.progressDashoffset}
          />
        </svg>
      ) : null
  },
})

export type USemiCircleXXS = InstanceType<typeof USemiCircleXXS>
