'use client';

import { useEffect, useState } from 'react';
import Image from 'next/image';

interface BannerGridProps {
  banners: string[];
}

export default function BannerGrid({ banners }: BannerGridProps) {
  const [visibleBanners, setVisibleBanners] = useState(banners);
  const [show, setShow] = useState(true);

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;

    

     
      const maxCount = Math.floor(width / 466);
      setVisibleBanners(banners.slice(0, maxCount));
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [banners]);

  if (!show) return null;

  return (
<div className="flex gap-4 justify-center items-center overflow-hidden w-full">
  {visibleBanners.map((src, i) => (
    <div
      key={i}
      className="
        relative rounded-xl 
        h-[130px] md:h-[110px] sm:h-[90px] 
        flex-1 min-w-[443px]  
        overflow-hidden
      "
    >
      <Image
        src={src}
        alt={`Banner ${i + 1}`}
        fill
        className="object-cover shadow-lg object-center"
        priority={i === 0}
      />
    </div>
  ))}
</div>
  );
}
