import React from 'react'

import { useStyleConfig, vui } from '../core'
import Link, { LinkProps } from '../link'
import { cs } from '../utils'
import { useFooterContext } from './context'

/** Individual link item of the Footer. */
export const FooterLink = vui<'a', LinkProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Footer', useFooterContext())

  return (
    <Link
      className={cs('vui-footerLink', className)}
      py={0.5}
      ref={ref}
      size={{ _: 'sm', md: 'md' }}
      variant="white"
      {...styles.link}
      {...rest}
    />
  )
})

FooterLink.displayName = 'FooterLink'
export default FooterLink
