'use client'

import { getAreas } from '@/api/areas'
import { useQuery } from '@tanstack/react-query'
import { NavLinkSearchParams } from './nav-link-search-params'

export function NavLinkCategory() {
  const { data: areas } = useQuery({ queryKey: ['areas'], queryFn: getAreas })

  return (
    <nav className="container my-10">
      <ul className="flex flex-wrap justify-center items-center gap-8">
        {areas?.data.map((area) => (
          <li key={area.id}>
            <NavLinkSearchParams
              variant="default"
              href={area.name.toLowerCase()}
              className="uppercase"
            >
              {area.name}
            </NavLinkSearchParams>
          </li>
        ))}
      </ul>
    </nav>
  )
}
