'use client';

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

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

function BottomNavLink({ icon, value, href, ...restProps }: Props) {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link {...restProps} href={href} className={clsx(
      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white',
      isActive && 'text-primary-foreground **:stroke-primary-foreground',
      restProps.className ?? '',
    )}>
      <div className="shrink-0">
        {icon}
      </div>
      <span className={clsx(
        'text-xs2 text-center truncate w-full dark:text-white',
      )}>
        {value}
      </span>
    </Link>
  )
}

export default BottomNavLink
