/* v8 ignore start */
import {Flex as InstUIFlex, type FlexProps as InstUIFlexProps} from '@instructure/ui-flex'
import React, {forwardRef} from 'react'
import {FlexItem} from '../FlexItem'

export interface FlexSubcomponents {
  /**
   * This is a wrapper around the InstUI FlexItem component.
   *
   * Differences include:
   * - It sets `overflowY` to `visible` by default.
   */
  Item: typeof FlexItem
}

export interface FlexProps extends InstUIFlexProps {}

const FlexComponent = forwardRef<InstUIFlex, FlexProps>((props, ref) => {
  return <InstUIFlex {...props} ref={ref} />
})

/**
 * This is a wrapper around the InstUI Flex component.
 */
export const Flex = FlexComponent as typeof FlexComponent & FlexSubcomponents
Flex.Item = FlexItem
Flex.displayName = 'Flex'