'use client'

import { ForwardedRef, forwardRef } from 'react'

import { PktHeaderGlobal } from './HeaderGlobal'
import { PktHeaderService } from './HeaderService'
import { IPktHeader, IPktHeaderGlobal } from './types'

export * from './types'

/**
 * Props for `<PktHeader>`. The `type` prop selects the variant:
 * the default `service` header (a single service's header) or the
 * `global` (kommune-wide) header driven by the shared header/footer
 * payload.
 */
export type IPktHeaderProps = (IPktHeader & { type?: 'service' }) | (IPktHeaderGlobal & { type: 'global' })

/**
 * PktHeader - Main header component for Oslo kommune services
 *
 * This component provides a complete header solution with:
 * - Logo and service name
 * - User menu with login/logout functionality
 * - Search functionality
 * - Responsive mobile menu
 * - Fixed positioning with scroll-to-hide
 *
 * The `type` prop switches between the `service` header (default) and
 * the `global` (kommune-wide) header.
 */
export const PktHeader = forwardRef((props: IPktHeaderProps, ref: ForwardedRef<HTMLElement>) => {
  if (props.type === 'global') {
    return <PktHeaderGlobal {...props} ref={ref as ForwardedRef<HTMLDivElement>} />
  }
  return <PktHeaderService {...props} ref={ref as ForwardedRef<HTMLDivElement>} />
})

PktHeader.displayName = 'PktHeader'