import React from 'react'

import Button from '../button'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useHeaderContext } from './context'
import { HeaderSignInProps } from './header.types'

/** Sign in button leading to Veracity login page. */
export const HeaderSignIn = vui<'button', HeaderSignInProps>((props, ref) => {
  const { children, className, url, ...rest } = props
  const { links } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext())

  const buttonVariant = styles?.signIn?.button?.variant ?? 'primaryDark'

  return (
    <Button
      as="a"
      className={cs('vui-headerSignIn', className)}
      href={url ?? links.signIn}
      ref={ref}
      size="lg"
      variant={buttonVariant}
      {...styles.signIn}
      {...rest}
    >
      {children ?? 'Sign in'}
    </Button>
  )
})

HeaderSignIn.displayName = 'HeaderSignIn'
export default HeaderSignIn
