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

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

  if (topBanner.isLoading) {
    return <TopBannerSkeleton />
  }

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

export default TopBanner