"use client";

import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";
import React, { useEffect, useRef, useState } from "react";

import { BorderButton } from "@/components/shadcnblocks/border-button";
import { cn } from "@/lib/utils";

// Custom hook to get previous value
const usePrevious = <T,>(value: T): T | undefined => {
  const [prev, setPrev] = useState<T | undefined>(undefined);
  const ref = useRef(value);

  useEffect(() => {
    setPrev(ref.current);
    ref.current = value;
  }, [value]);

  return prev;
};

interface Services21Props {
  className?: string;
}

const Services21 = ({ className }: Services21Props) => {
  const services = [
    {
      id: "{۱}",
      title: "طراحی محصول",
      image: "/block-media/shadcnblocks/block/guri4/img11.png",
      description:
        "با درک اهداف کسب‌وکار، مخاطب هدف و چالش‌های فعلی شما شروع می‌کنیم. این فاز شامل تحقیق، تحلیل و برنامه‌ریزی استراتژیک برای شناسایی فرصت‌هاست.",
    },
    {
      id: "{۲}",
      title: "طراحی برند",
      image: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
      description:
        "بر اساس یافته‌ها، استراتژی جامعی متناسب با اهداف شما توسعه می‌دهیم. این شامل تعریف رویکرد، زمان‌بندی و نقاط عطف کلیدی برای موفقیت است.",
    },
    {
      id: "{۰۳}",
      title: "طراحی رابط کاربری/تجربه کاربری",
      image: "/block-media/shadcnblocks/block/guri4/img10.png",
      description:
        "استراتژی را از طریق پیاده‌سازی و توسعه دقیق به واقعیت تبدیل می‌کنیم. تیم ما به‌صورت همکاری کار می‌کند تا هر جزئیات با نیازها و استانداردهای شما هم‌خوان باشد.",
    },
    {
      id: "{۰۴}",
      title: "برندسازی",
      image: "/block-media/shadcnblocks/block/guri4/img9.png",
      description:
        "عملکرد را به‌طور مستمر پایش و بازخورد جمع‌آوری می‌کنیم تا راه‌حل را پالایش و بهبود دهیم. این فرآیند تکراری موفقیت و رشد بلندمدت را تضمین می‌کند.",
    },
    {
      id: "{۰۵}",
      title: "بسته‌بندی",
      image: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
      description:
        "راه‌حل‌های بسته‌بندی جامعی می‌سازیم که محصولات شما را محافظت و در عین حال دیده‌شدن برند را تقویت می‌کنند. طراحی‌های ما عملکرد و جذابیت بصری را متعادل می‌کنند تا تعامل مصرف‌کننده را افزایش دهند.",
    },
  ];

  const [active, setActive] = useState<number>(0);
  const previousActive = usePrevious(active);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex w-full flex-col justify-between lg:flex-row lg:gap-20">
          <div className="top-10 h-fit w-full space-y-7 py-8 lg:sticky lg:max-w-xs">
            <div className="relative h-90 overflow-hidden">
              {previousActive !== undefined && (
                <div className="absolute top-0 h-full w-full">
                  <img
                    src={services[previousActive].image}
                    className="h-full w-full object-cover"
                    alt={services[previousActive].title}
                  />
                </div>
              )}
              <motion.div
                initial={{ clipPath: "inset(0% 0% 0% 100%)" }}
                animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
                key={active}
                transition={{
                  type: "spring",
                  stiffness: 150,
                  damping: 20,
                }}
                className="h-full w-full"
              >
                <img
                  src={services[active].image}
                  className="h-full w-full object-cover"
                  alt={services[active].title}
                />
              </motion.div>
            </div>
            <p className="font-semibold tracking-tight text-foreground/20">
              {services[active].title}
            </p>
            <p className="text-base text-foreground/50">
              {services[active].description}
            </p>
          </div>
          <div className="relative w-full xl:ps-20">
            <ul>
              {services.map((service, index) => (
                <li
                  key={index}
                  onMouseEnter={() => setActive(index)}
                  className={cn(
                    "cursor-pointer border-b border-foreground/20 py-8 text-2xll font-semibold tracking-tight lg:text-2xll",
                  )}
                >
                  <div
                    className={index === active ? "opacity-100" : "opacity-20"}
                  >
                    <span>{service.title}</span>
                    <sup className="align-super text-sm text-red-500 lg:text-3xl">
                      {service.id}
                    </sup>
                  </div>
                </li>
              ))}
            </ul>
            <BorderButton className="group mt-10 gap-2 border-red-100 bg-red-500/10 text-red-500">
              شروع کنید
              <ArrowUpRight className="size-4 transition-transform duration-300 rtl:rotate-180 group-hover:rotate-45 rtl:group-hover:-rotate-[135deg]" />
            </BorderButton>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Services21 };