import * as React from 'react'
import NextLink from 'next/link'
import MuiLink from '@mui/material/Link'
import { styled } from '@mui/material/styles'

// Add support for the sx prop for consistency with the other branches.
const Anchor = styled(NextLink)({})

export const NextLinkComposed = React.forwardRef(function NextLinkComposed(
  props,
  ref
) {
  const { children, ...rest } = props
  return (
    <Anchor href="/" ref={ref} {...rest}>
      {children}
    </Anchor>
  )
})

// A styled version of the Next.js Link component:
// https://nextjs.org/docs/api-reference/next/link
const Link = React.forwardRef(function Link(props, ref) {
  return <MuiLink component={NextLinkComposed} ref={ref} {...props} />
})

export default Link
