function RecentLots() {

    const [data, setData] = useState<{ lot_id: number; image: string; title: string; category: string; current_price: number; end_date: string; }[]>([]);

    useEffect(() => {
        fetch('/api/lastLots')
            .then((res) => res.json())
            .then((data) => {
                setData(data.data);
            });
    }, []);

    return (
        <section id={styles["recent-lots-section"]}>
                {data.map((item, index) => (
                    <article onClick={() => CallLotInfoPopUp(item.lot_id)} className={styles["recent-lot"]} key={index}>
                        <img className={styles["lot-img"]} src={`/lotsImages/${item.image}`} alt={`/lotsImages/${item.image}`} />
                        <div className={styles["lot-info-description"]}>
                            <div className={styles["title-category-container"]}>
                                <h3 className={styles["lot-title"]}>{item.title}</h3>
                                <h3 className={styles["lot-categoty"]}>{item.category}</h3>
                            </div>
                            <div className={styles["price-deadline-container"]}>
                                <h3 className={styles["lot-price"]}>{item.current_price} грн</h3>
                                <h4 className={styles["dates-before-deadline"]}>До кінця: {item.end_date}</h4>
                            </div>
                        </div>
                            
                        <div className={styles["btn-container"]}>
                            <a onClick={function() { CallMakeBid(index);}} className={styles["make-bid-shortcut-btn"]}>Bid</a>
                        </div>
                    </article>
                ))}
                <div id={styles["all-lots-link-container"]}></div>
        </section>

    );
}

export default RecentLots;