'use client'

import Link, { LinkProps } from 'next/link'

import { useSearchParams } from 'next/navigation'
import { Button } from './ui/button'

interface NavLinkProps extends LinkProps {
  variant:
    | 'default'
    | 'secondary'
    | 'third'
    | 'destructive'
    | 'outline'
    | 'ghost'
    | 'link'
    | null
    | undefined
  children: React.ReactNode
  className?: React.HTMLProps<HTMLElement>['className']
}

export function NavLinkSearchParams(props: NavLinkProps) {
  const searchParams = useSearchParams()

  const category = searchParams.get('categoria')

  return (
    <Button
      data-current={category === props.href}
      className={`data-[current=true]:font-semibold rounded-2xl ${props.className}`}
      variant={category === props.href ? 'third' : props.variant}
      asChild
    >
      <Link href={{ query: { categoria: props.href as string } }}>
        {props.children}
      </Link>
    </Button>
  )
}
