Untitled

import { IconChevron } from '@/constants/global/icons';
import Link from 'next/link';
import { FC } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import BookCard from './bookCard';
import { BookType } from '@/types/routes/global/book.type';

interface IProps {
  categoryName: string;
  categoryUrl: string;
  booksData: BookType[];
}

const BooksCardSlider: FC<IProps> = ({ ...props }): JSX.Element => {
  return (
    <section className="space-y-4 border border-[#e3e3e3] rounded-xl bg-[#fafafa] p-4 md:p-6">
      {/* title, see-all_btn */}
      <div className="flex justify-between items-center text-[15px] font-medium border border-[#e3e3e3] bg-[#f2f2f2] p-3 rounded-xl sm:p-3 md:text-[16px]">
        {/* title */}
        <h2 className="font-bold pt-[3px]">{props.categoryName}</h2>
        {/* see-all_btn */}
        <Link
          href={props.categoryUrl}
          className="flex items-center gap-1 text-[13px] sm:text-[14px] md:text-[15px] transition-all duration-300 group opacity-80 hover:opacity-100"
        >
          <span className="pt-1 text-black">مشاهده همه</span>
          <IconChevron color="#000" size={11} position={'left'} />
        </Link>
      </div>
      {/* cards slider */}
      <Swiper
        slidesPerView={'auto'}
        navigation
        spaceBetween={15}
        modules={[Navigation]}
        className="books-card_slider overflow-hidden"
      >
        {props.booksData.map((item: any) => {
          return (
            <SwiperSlide
              key={item.inventoryid}
              className="!w-[180px] md:!w-[185px] lg:!w-[210px]"
            >
              <BookCard bookData={item} bookType="cards-slider" />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </section>
  );
};

export default BooksCardSlider;