import Link from '@/core/components/elements/Link/Link';
import { getRandomInt } from '@/utils/getRandomInt';
import Image from 'next/image';
import { useEffect, useMemo, useState } from 'react';
import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton';

const HeroBannerSecondary = () => {
  const [heroBannerSecondary, setHeroBannerSecondary] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  // const heroBannerSecondary = useQuery(
  //   'heroBannerSecondary',
  //   bannerApi({ type: 'index-a-2' })
  // );

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const res = await fetch(`/api/hero-banner?type=index-a-2`);
      const { data } = await res.json();
      if (data) {
        setHeroBannerSecondary(data);
      }
      setIsLoading(false);
    };

    fetchData();
  }, []);

  const randomIndex = useMemo(() => {
    if (!heroBannerSecondary) return null;
    const length = heroBannerSecondary?.length;
    return getRandomInt(length);
  }, [heroBannerSecondary]);
  if (isLoading) return <HeroBannerSkeleton />;

  return (
    heroBannerSecondary &&
    randomIndex !== null && (
      <Link href={heroBannerSecondary[randomIndex]?.url} className='h-full'>
        <Image
          src={heroBannerSecondary[randomIndex]?.image}
          width={512}
          height={1024}
          alt={heroBannerSecondary[randomIndex]?.name}
          className='object-cover object-center h-full'
          loading='eager'
          placeholder='blur'
          blurDataURL='/images/indoteknik-placeholder.png'
          sizes='(max-width: 768px) 100vw, 50vw'
        />
      </Link>
    )
  );
};

export default HeroBannerSecondary;