'use client'

import Image from 'next/image'
import { useSearchParams } from 'next/navigation'
import bannerComunicacao from '../../public/images/banners/comunicacao.jpg'
import bannerEducacao from '../../public/images/banners/educacao.jpg'
import bannerNegocios from '../../public/images/banners/negocios.jpg'
import bannerSaude from '../../public/images/banners/saude.jpg'
import bannerStudants from '../../public/images/banners/students_banner.jpg'
import bannerTecnologia from '../../public/images/banners/tecnologia.jpg'
import bannerTeologia from '../../public/images/banners/teologia.jpg'

import bannerComunicacaoMobile from '../../public/images/banners/comunicacao-mobile.jpg'
import bannerEducacaoMobile from '../../public/images/banners/educacao-mobile.jpg'
import bannerNegociosMobile from '../../public/images/banners/negocios-mobile.jpg'
import bannerSaudeMobile from '../../public/images/banners/saude-mobile.jpg'
import bannerTecnologiaMobile from '../../public/images/banners/tecnologia-mobile.jpg'
import bannerTeologiaMobile from '../../public/images/banners/teologia-mobile.jpg'

export function BannerCategory() {
  const searchParams = useSearchParams()

  const category = searchParams.get('categoria')

  function desktopBannerCategory() {
    switch (category) {
      case 'tecnologia':
        return bannerTecnologia
      case 'negocios':
        return bannerNegocios
      case 'comunicacao':
        return bannerComunicacao
      case 'educacao':
        return bannerEducacao
      case 'saude':
        return bannerSaude
      case 'teologia':
        return bannerTeologia
      default:
        return bannerStudants
    }
  }

  function mobileBannerCategory() {
    switch (category) {
      case 'tecnologia':
        return bannerTecnologiaMobile
      case 'negocios':
        return bannerNegociosMobile
      case 'comunicacao':
        return bannerComunicacaoMobile
      case 'educacao':
        return bannerEducacaoMobile
      case 'saude':
        return bannerSaudeMobile
      case 'teologia':
        return bannerTeologiaMobile
      default:
        return bannerStudants
    }
  }

  return (
    <div className="h-[300px] flex items-center justify-end">
      <Image
        alt="banner"
        className="hidden md:flex w-full h-full object-cover"
        src={desktopBannerCategory()}
        unoptimized
      />
      <Image
        alt="banner"
        className="flex md:hidden w-full h-full object-cover"
        src={mobileBannerCategory()}
        unoptimized
      />
    </div>
  )
}
