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 TopBanner = ({ onLoad = () => {} }) => {
  const [topBanner, setTopBanner] = useState([]);
  const { isDesktop, isMobile } = useDevice();

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

    fetchData();
  }, []);

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

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

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

  return (
    <SmoothRender
      isLoaded={hasData}
      // height='36px'
      duration='700ms'
      delay='300ms'
      className='h-auto'
    >
      <Link
        href={data?.url}
        className='block bg-cover bg-center h-3 md:h-6 lg:h-[36px]'
        aria-label='panduan pick up barang'
        style={{
          backgroundImage: `url('${data?.image}')`,
        }}
      ></Link>
    </SmoothRender>
  );
};

export default TopBanner;