import odooApi from '@/core/api/odooApi'
import { useQuery } from 'react-query'
import Image from 'next/image'

const TopBanner = () => {
  const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
  const topBanner = useQuery('topBanner', fetchTopBanner)

  return (
    topBanner.isFetched &&
    topBanner.data?.length > 0 && (
      <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
        <Image
          src={topBanner.data[0].image}
          alt={topBanner.data[0].name}
          width={1440}
          height={40}
          className='object-cover object-center h-full mx-auto'
        />
      </div>
    )
  )
}

export default TopBanner