import { useState } from "react";
import SaveBox from "./savebox";

const MAX_VISIBLE_INFLUENCERS = 10;

const ScrollArea = (props) => {
    const { items, campaignDetailData, setOpenSideModal, translations } = props;
    const [favoriteList, setFavoriteList] = useState<any>([]);
    const visibleItems = items?.slice(0, MAX_VISIBLE_INFLUENCERS);

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
            {visibleItems?.map((list, ind) => (
                <SaveBox key={ind} data={list} campaignDetailData={campaignDetailData} favoriteList={favoriteList} setFavoriteList={setFavoriteList} setOpenSideModal={setOpenSideModal} translations={translations} />
            ))}
        </div>
    );
};

export default ScrollArea;