import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes } from 'vue'
import './spinnerStyles.scss'

export const makeUSpinnerProps = propsFactory(
  {
    size: {
      type: String,
      default: 24,
      required: false,
    },
    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'USpinner'
)

export type USpinnerProps = ExtractPropTypes<typeof makeUSpinnerProps>

export type USpinnerSlots = {
  //
}

export const USpinner = genericComponent<USpinnerSlots>()({
  name: 'USpinner',

  props: makeUSpinnerProps(),

  setup(props) {
    return () => (
      <span
        class={[props.class, 'spinner-border']}
        style={{ width: `${props.size}px`, height: `${props.size}px` }}
      />
    )
  },
})

export type USpinner = InstanceType<typeof USpinner>