'use client'

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

import { usePathname, 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 pathname = usePathname()

  const path = pathname

  const area = searchParams.get('area')

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