import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNextCustom,
  CarouselPreviousCustom,
} from "../ui/carousel";
import Title from "../global/Title";
import HorizontalCutCornerBordered from "../global/HorizontalCutCornerBordered";
import Note from "@/icons/Note.svg";
import Image from "next/image";
function BlogsCarousel() {
  return (
    <Carousel orientation="vertical" className="w-full max-w-157">
      <CarouselContent className="h-133">
        {Array.from({ length: 10 }).map((_, index) => (
          <CarouselItem key={index} className="basis-3 lg:basis-1/5">
            <div className="-mb-22 py-1 px-3">
              <Title className="text-base text-white-foreground flex items-start">
                <Image
                  src={Note}
                  alt="questions"
                  width={24}
                  height={24}
                  className="inline ml-1"
                />
                <span>
                  چگونه بفهمیم یک نرم‌افزار واقعاً به درد ما می‌خورد یا نه؟
                </span>
              </Title>
              <p className="text-sm text-border">
                با بررسی امکانات، خواندن توضیحات، استفاده از نسخه آزمایشی و توجه
                به نیاز واقعی خودمان.
              </p>
            </div>
            <HorizontalCutCornerBordered
              width="100%"
              height={100}
              cutSize={20}
              className="rotate-180"
            />
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="flex justify-center gap-3 mt-5 lg:mt-0 rotate-180 lg:absolute lg:top-1/2 lg:-right-14 lg:flex-col lg:rotate-0">
        <CarouselPreviousCustom className="rotate-90 lg:rotate-0" />
        <CarouselNextCustom className="rotate-90 lg:rotate-0" />
      </div>
    </Carousel>
  );
}

export default BlogsCarousel;
