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;