Untitled

import React, { useState, useEffect } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './Offers.css';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const CarouselSlider = () => {
  const [offers, setOffers] = useState([]);
  const [loading, setLoading] = useState(true);
  const navi = useNavigate();

  useEffect(() => {
    const fetchOffers = async () => {
      try {
        const response = await axios.get('YOUR_AXIOS_LINK_HERE');
        setOffers(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching offers:', error);
        setLoading(false);
      }
    };

    fetchOffers();
  }, []);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <Slider {...settings} className="carousel-slider">
          {offers.map((offer, index) => (
            <div key={index} className="carousel-slide" onClick={() => navi('/NavbarCategory/mobile')}>
              <img src={offer.image} alt={offer.title} className="carousel-slide-image" />
              <div className="carousel-slide-content">
                <h3 className="carousel-slide-title">{offer.title}</h3>
                <p className="carousel-slide-description">{offer.description}</p>
              </div>
            </div>
          ))}
        </Slider>
      )}
    </div>
  );
};

export default CarouselSlider;