import { useDevice } from '#imports'
import { computed, type Component } from 'vue'
import { DeviceEnum } from '#lib/enums'

interface PageByDeviceProps {
  component?: Component
  layout: string
}

/**
 * Provides a responsive component and layout based on the device type.
 *
 * This function returns the appropriate component and layout based on whether the device is mobile or desktop.
 *
 * @param {Component} [componentDesktop] - The component to use for desktop devices.
 * @param {Component} [componentMobile] - The component to use for mobile devices.
 * @returns {PageByDeviceProps} An object containing the responsive component and layout.
 * @namespace
 */
export function useResponsiveComponent(
  componentDesktop?: Component,
  componentMobile?: Component,
): PageByDeviceProps {
  const { isMobile } = useDevice()

  /**
   * Computed property that returns the appropriate component based on the device type.
   *
   * @type {Component | undefined} The component to be used, either desktop or mobile based on the device.
   */
  const component = computed(() => {
    return isMobile ? componentMobile : componentDesktop
  })

  /**
   * Computed property that returns the layout type based on the device type.
   *
   * @type {string} The layout type, either mobile or desktop.
   */
  const layout = computed(() => {
    return isMobile ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP
  })

  return {
    component: component.value,
    layout: layout.value,
  }
}