// styles
import './UContainer.scss'

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

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

export const makeUContainerProps = propsFactory(
  {
    fluid: {
      type: Boolean,
      default: false,
    },

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

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

  props: makeUContainerProps(),

  setup(props, { slots }) {
    useRender(() => (
      <props.tag
        class={[
          'u-container',
          { 'u-container--fluid': props.fluid },
          props.class,
        ]}
        style={props.style}
        v-slots={slots}
      />
    ))

    return {}
  },
})

export type UContainer = InstanceType<typeof UContainer>