import React from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../use-theme'

export interface Props {
  href?: string
  block?: boolean // used by footer-foot
  className?: string
}

const defaultProps = {
  href: '',
  block: false,
  className: ''
}

type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
export type FooterLinkProps = Props & typeof defaultProps & NativeAttrs

const FooterLink = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<FooterLinkProps>>(
  ({ href, block, children, className, ...props }, ref: React.Ref<HTMLAnchorElement>) => {
    const theme = useTheme()
    const linkColor = 'inherit'
    const hoverColor = theme.palette.successLight

    return (
      <a
        className={`link ${className}${block ? ' block' : undefined}`}
        href={href}
        {...props}
        ref={ref}
      >
        {children}
        <style jsx>{`
          .link {
            display: inline-flex;
            align-items: baseline;
            font-size: 0.875rem;
            line-height: ${theme.layout.gap};
            color: ${linkColor};
            text-decoration: none;
            margin: auto 0;
            padding: 0;
            width: fit-content;
            transition: color 200ms ease 0ms;
          }

          .link:hover {
            color: ${hoverColor};
          }
        `}</style>
      </a>
    )
  }
)

const MemoFooterLink = React.memo(FooterLink)

export default withDefaults(MemoFooterLink, defaultProps)