import { genericComponent, propsFactory } from '@/utils'

import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'

import { ExtractPropTypes } from 'vue'

export const makeUDividerProps = propsFactory(
  {
    color: {
      type: String,
      default: 'gray-200',
      required: false,
    },

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

export type UDividerProps = ExtractPropTypes<typeof makeUDividerProps>

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

  props: makeUDividerProps(),

  setup(props) {
    return () => (
      <div class={[`w-full h-0.25 bg-${props.color}`, props.class]}></div>
    )
  },
})

export type UDivider = InstanceType<typeof UDivider>