import Image from 'next/image';
import { useQuery } from 'react-query';
import useDevice from '@/core/hooks/useDevice';
import odooApi from '@/core/api/odooApi';
import SmoothRender from '~/components/ui/smooth-render';
import Link from '../Link/Link';
import { background } from '@chakra-ui/react';
import { useEffect, useState } from 'react';

const TopBannerMobile = ({ onLoad = () => {} }) => {
  const [topBannerMobile, setTopBannerMobile] = useState([]);
  const { isDesktop, isMobile } = useDevice();

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(`/api/hero-banner?type=top-banner-mobile`);
      const { data } = await res.json();
      if (data) {
        setTopBannerMobile(data);
      }
    };

    fetchData();
  }, []);

  // const topBannerMobile = useQuery({
  //   queryKey: 'topBannerMobile',
  //   queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
  //   refetchOnWindowFocus: false,
  // });

  // const backgroundColor = topBannerMobile.data?.[0]?.backgroundColor || 'transparent';
  const hasData = topBannerMobile?.length > 0;
  const data = topBannerMobile?.[0] || null;

  useEffect(() => {
    if (hasData) {
      onLoad();
    }
  }, [hasData, onLoad]);

  
  if (!hasData || !data?.image) {
    return null;
  }
  return (
    <SmoothRender
      isLoaded={hasData}
      duration='700ms'
      delay='300ms'
      className='h-auto'
    >
      <Link
        href={data?.url}
        aria-label='panduan pick up barang'
        className='block w-full'
      >
        <Image
          src={data?.image}
          alt='Panduan Pick Up Barang'
          width={0}
          height={0}
          sizes='100vw'
          className='w-full h-auto'
          priority
        />
      </Link>
    </SmoothRender>
  );
};

export default TopBannerMobile;