"use client";

import { motion, useSpring } from "framer-motion";
import React, { useState } from "react";

import { cn } from "@/lib/utils";

interface Awards5Props {
  className?: string;
}

const faOrder = (index: number) => (index + 1).toLocaleString("fa-IR");

const Awards5 = ({ className }: Awards5Props) => {
  const SPRING = {
    mass: 0.1,
    stiffness: 100,
    damping: 10,
  };

  const xSpring = useSpring(0, SPRING);
  const ySpring = useSpring(0, SPRING);
  const scaleSpring = useSpring(0, SPRING);
  const opacity = useSpring(0, SPRING);

  const awards = [
    {
      title: "جایزه همکاری خلاقانه",
      url: "#",
      image: "/block-media/shadcnblocks/block/guri4/img1.png",
    },
    {
      title: "جایزه تعالی طراحی",
      url: "#",
      image: "/block-media/shadcnblocks/block/guri4/img2.png",
    },
    {
      title: "نوآوری در توسعه وب",
      url: "#",
      image: "/block-media/shadcnblocks/block/guri4/img3.png",
    },
    {
      title: "بهترین طراحی تجربه کاربری",
      url: "#",
      image: "/block-media/shadcnblocks/block/guri4/img4.png",
    },
    {
      title: "طراحی بصری برجسته",
      url: "#",
      image: "/block-media/shadcnblocks/block/guri4/img5.png",
    },
    {
      title: "جایزه نوآوری دیجیتال",
      url: "#",
      image: "/block-media/shadcnblocks/block/guri4/img6.png",
    },
  ];

  const handlePointerMove = (e: React.PointerEvent<HTMLUListElement>) => {
    const bounds = e.currentTarget.getBoundingClientRect();
    xSpring.set(e.clientX - bounds.left + 20);
    ySpring.set(e.clientY - bounds.top + 20);
  };

  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="font-hedvigLettersSerif container">
        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 lg:sticky">
            <p className="text-xl text-foreground/30">
              {Number(5).toLocaleString("fa-IR")} جوایز
            </p>
          </div>
          <ul
            onPointerMove={handlePointerMove}
            onPointerEnter={() => {
              opacity.set(1);
              scaleSpring.set(1);
            }}
            onPointerLeave={() => {
              opacity.set(0);
              scaleSpring.set(0);
            }}
            className="relative col-span-4 w-full"
          >
            {awards.map((award, index) => (
              <li
                key={index}
                onPointerEnter={() => {
                  setCurrentIndex(index);
                }}
                className="group relative flex cursor-pointer items-center justify-between border-b py-5"
              >
                <h3 className="text-xl font-medium tracking-tight lg:text-2xll">
                  {award.title}
                  <sup className="align-top text-xs lg:text-sm">
                    {faOrder(index)}
                  </sup>
                </h3>
                <a
                  href={award.url}
                  className="text-sm tracking-tighter text-foreground/30 hover:text-foreground"
                >
                  مشاهده جایزه
                </a>
              </li>
            ))}
            <motion.div
              className="pointer-events-none absolute top-0 inset-s-0 size-40 border"
              style={{
                x: xSpring,
                y: ySpring,
                opacity: opacity,
                scale: scaleSpring,
              }}
            >
              <img
                src={awards[currentIndex].image}
                alt={awards[currentIndex].title}
                className="h-full w-full object-cover"
              />
            </motion.div>
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Awards5 };