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

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

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

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

  props: makeUSemiCircleXSProps(),

  setup(props) {
    return () =>
      props.shape === 'semi-circle' && props.size === 'xs' ? (
        <svg
          width="160"
          height="152"
          viewBox="0 0 160 152"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M152 80C152 70.5448 150.138 61.1822 146.519 52.4468C142.901 43.7114 137.598 35.7741 
          130.912 29.0883C124.226 22.4025 116.289 17.099 107.553 13.4807C98.8178 9.86234 89.4552 8 
          80 8C70.5448 7.99999 61.1823 9.86232 52.4468 13.4807C43.7114 17.099 35.7742 22.4025 
          29.0883 29.0883C22.4025 35.7741 17.099 43.7113 13.4807 52.4468C9.86234 61.1822 8 70.5448 
          8 80"
            class="stroke-gray-200"
            stroke-width="16"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M8 80C8 70.5448 9.86234 61.1822 13.4807 52.4468C17.099 43.7113 22.4025 35.7741 
          29.0883 29.0883C35.7741 22.4025 43.7114 17.099 52.4468 13.4807C61.1822 9.86233 70.5448 
          8 80 8C89.4552 8 98.8178 9.86234 107.553 13.4807C116.289 17.099 124.226 22.4025 130.912 
          29.0883C137.598 35.7741 142.901 43.7114 146.519 52.4468C150.138 61.1822 152 70.5448 152 
          80"
            class="stroke-primary-600"
            stroke-width="16"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-dasharray="360"
            stroke-dashoffset={props.progressDashoffset}
          />
        </svg>
      ) : null
  },
})

export type USemiCircleXS = InstanceType<typeof USemiCircleXS>