'use client';
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import { FaCaretRight } from 'react-icons/fa';

import CounDown from './CounDown';
import { productDealData } from './productDealData';
import DealProductItem from '@Common/product/DealProductItem';

const BoxProductDeal: React.FC = () => {
  return (
    <div className="box-product-deal boder-radius-10">
      <div className="box-title-deal flex items-center justify-between">
        <div className="title-deal flex items-center justify-center gap-10">
          <i className="sprite sprite-icon-deal-home"></i>
          <h2 className="title font-bold">Giá tốt mỗi ngày</h2>
          <span className="text-time-deal-home color-white fz-16 font-bold">Kết thúc sau</span>
          <div className="global-time-deal flex items-center gap-2">
            <CounDown />
          </div>
        </div>
        <a href="/deal" className="button-deal color-white mb-10 flex items-center">
          Xem thêm khuyến mãi <FaCaretRight size={16} />
        </a>
      </div>
      <div className="box-list-item-deal swiper-box-deal">
        <Swiper
          modules={[Autoplay, Navigation, Pagination]}
          spaceBetween={12}
          slidesPerView={6}
          loop={true}
          navigation={true}
        >
          {productDealData.map((item, index) => (
            <SwiperSlide key={index}>
              <DealProductItem item={item} />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
};

export default BoxProductDeal;