import Link from 'next/link'
import React from 'react'
import type { LinkProps } from 'next/link'

type Props = {
  icon: React.ReactElement
  value: string
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>

function BottomNavHighlightLink({ icon, value, ...restProps }: Props) {
  return (
    <Link {...restProps} className={`flex flex-col relative justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
      <div className='bg-primary p-3 rounded-full'>
        {icon}
      </div>
      <span className='text-xs2 text-disabled-text'>
        {value}
      </span>
    </Link>
  )
}

export default BottomNavHighlightLink