'use client'

import Image from 'next/image'
import { useSearchParams } from 'next/navigation'
import bannerStudants from '../../public/images/banners/students_banner.jpg'

import { getAreas } from '@/api/areas'
import { useQuery } from '@tanstack/react-query'

export function BannerCategory(areaBanner: { data?: string | undefined }) {
  const searchParams = useSearchParams()

  const category = searchParams.get('area')
  const { data: areas } = useQuery({ queryKey: ['areas'], queryFn: getAreas })

  const bannerImage = areas?.data.find(
    (item) => item.name.toLowerCase() === category?.toLowerCase(),
  )

  const bannerImageArea = areas?.data.find(
    (item) => item.name.toLowerCase() === areaBanner?.data?.toLowerCase(),
  )

  return (
    <div className="h-[300px] flex items-center justify-end">
      <Image
        alt="banner"
        className="hidden md:flex w-full h-full object-cover"
        width={100}
        height={100}
        src={
          bannerImage?.desktopBanner ||
          bannerImageArea?.desktopBanner ||
          bannerStudants
        }
        unoptimized
      />
      <Image
        alt="banner"
        className="flex md:hidden w-full h-full object-cover"
        width={100}
        height={100}
        src={
          bannerImage?.mobileBanner ||
          bannerImageArea?.mobileBanner ||
          bannerStudants
        }
        unoptimized
      />
    </div>
  )
}
