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

export const makeUTableRowProps = propsFactory(
  {
    height: {
      type: String,
      default: '72',
      required: false,
    },

    divider: {
      type: String,
      default: 'alternating fills',
      required: false,
    },
    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UTableRow'
)

export type UTableRowProps = ExtractPropTypes<typeof makeUTableRowProps>

export type UTableRowSlots = {
  default: never
}

export const UTableRow = genericComponent<UTableRowSlots>()({
  name: 'UTableRow',

  props: makeUTableRowProps(),

  emits: {
    //
  },

  setup(props, { emit, slots }) {
    const bgClasses = computed(() => {
      return props.divider === 'alternating fills'
        ? 'bg-gray-25 hover:bg-gray-25'
        : `bg-white hover:bg-gray-50`
    })

    return () => (
      <div class={[bgClasses.value, 'table-row ']}>{slots.default?.()}</div>
    )
  },
})

export type UTableRow = InstanceType<typeof UTableRow>