import React from 'react'

import { useStyleConfig, vui } from '../core'
import Link from '../link'
import P, { PProps } from '../p'
import { cs } from '../utils'
import { useHeaderContext } from './context'

/** Displays a message with link to Marketplace if user has no services available. */
export const HeaderServicesMessage = vui<'p', PProps>((props, ref) => {
  const { children, className, ...rest } = props
  const { links } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext())

  return (
    <P
      className={cs('vui-headerServicesMessage', className)}
      mb={2}
      ml={2}
      ref={ref}
      {...styles.servicesMessage}
      {...rest}
    >
      {children ?? (
        <>
          No services available. <br />
          Explore more on the{' '}
          <Link href={links?.marketplace} isUnderlined>
            marketplace
          </Link>
          .
        </>
      )}
    </P>
  )
})

HeaderServicesMessage.displayName = 'HeaderServicesMessage'

export default HeaderServicesMessage
