"use client";
import React, { useState } from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselNextCustom,
  CarouselPrevious,
  CarouselPreviousCustom,
} from "../ui/carousel";
import ButtonOutLineCutCorner from "../atoms/ButtonOutLineCutCorner";
import { Button } from "../ui/button";
import CutCornerParentCard from "../global/CutCornerParentCard";
import Image from "next/image";
import RoundedTriangle from "../global/RoundedTriangle";
import Title from "../global/Title";
import { useIsMobile } from "@/hooks/checkScreenSize";
const menueItems = [
  { title: "همه نمونه ها" },
  { title: "سایت" },
  { title: "نرم‌افزار" },
  { title: "اپلیکیشن‌" },
];
function PortfolioCarousel() {
  const [activeItem, setActiveItem] = useState<number | null>(0);
  const isMobile = useIsMobile();
  if (isMobile === null) return null;

  const handleClick = (index: number | null) => {
    setActiveItem(activeItem === index ? -1 : index);
  };
  return (
    <div className="lg:relative flex flex-col gap-4">
      {/*menue buttons */}
      <div className="flex justify-center items-center w-full gap-2 lg:gap-4">
        {menueItems.map((item, index) =>
          activeItem === index ? (
            <ButtonOutLineCutCorner
              color="secondary"
              key={item.title}
              className="font-bold p-4 text-secondary text-xs lg:text-sm"
            >
              {item.title}
            </ButtonOutLineCutCorner>
          ) : (
            <Button
              key={item.title}
              onClick={() => handleClick(index)}
              className="rounded-lg text-xs lg:text-sm bg-linear-to-b from-[#FFFFFF] to-[#FFE3DA] hover:from-[#FFFFFF] hover:to-[#FFE3DA] text-primary"
            >
              {item.title}
            </Button>
          ),
        )}
      </div>
      <Carousel
        // opts={{
        //   loop: true,
        // }}
        orientation={isMobile ? "horizontal" : "vertical"}
        className="w-full relative overflow-visible"
      >
        <CarouselContent className="h-80">
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index}>
              <CutCornerParentCard
                size={43}
                bottomRight
                className="lg:w-157 h-72 relative"
              >
                <Image
                  src=""
                  width={100}
                  height={100}
                  alt="Portfolio item"
                  className="rounded-[inherit] object-cover w-full h-full"
                />
                <Title className="text-xl absolute bottom-4 right-10">
                  سایت فروشگاهی شهر فرش
                </Title>
              </CutCornerParentCard>
            </CarouselItem>
          ))}
        </CarouselContent>
        <div className="absolute inset-y-0 inset-x-0 rotate-180 lg:rotate-0 flex items-center justify-center -bottom-80 left-1/2 -translate-x-1/2 lg:left-auto lg:translate-x-0 lg:-top-80 lg:-right-12  lg:flex-col gap-3">
          <CarouselPreviousCustom className="rotate-90 lg:rotate-0" />
          <CarouselNextCustom className="rotate-90 lg:rotate-0" />
        </div>
        <RoundedTriangle className="bg-secondary absolute bottom-0 right-0 translate-y-[16%] translate-x-[37%] scale-[0.29]  lg:translate-y-[27%]" />
      </Carousel>
    </div>
  );
}

export default PortfolioCarousel;
