/* eslint-disable @next/next/no-img-element */
import { motion } from "framer-motion";
import { PrimeModal } from "../modals/PrimeModal";
import { useModalStore } from "@/stores/useModalStore";
import SwitchIcon from "@/components/icons/SwitchIcon";

export function InterierConfiguratorCard({ slide }: { slide: number }) {
  const { setModal } = useModalStore();

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{
        opacity: +(slide > 11),
        bottom: slide > 11 ? "38.026vh" : "93.684vh",
      }}
      onClick={() =>
        setModal(
          <PrimeModal
            categoryTitle="Опции"
            packages={["Премиум", "Бизнес"]}
            text="Конфигуратор интерьера убирает лишние сомнения: клиент видит сразу несколько вариантов отделки и выбирает тот, что ближе к его вкусам — что часто ускоряет заключение договора."
            title="Конфигуратор интерьера"
            src="/img/pages/prime/configuratorInterior.png"
          />
        )
      }
      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[#37393B99] w-[13.542vw] h-[17.105vh] flex flex-col justify-between backdrop-blur-[47.6px] right-[27.847vw] cursor-pointer${
        slide <= 11 ? " pointer-events-none" : ""
      }`}
    >
      <img
        src="/img/pages/prime/ruble.png"
        className="w-[0.833vw] absolute"
        alt=""
      />
      <div className="flex relative justify-center">
        <img
          src="/img/pages/prime/configuratorInterier1.jpg"
          alt=""
          className="rounded-full w-[4.444vw] aspect-square"
        />
        <div className="bg-gradient rounded-full p-[0.538vw] absolute z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
          <div className="text-white lg:size-[1.076vw] size-[1.076vw]">
            <SwitchIcon />
          </div>
        </div>
        <img
          src="/img/pages/prime/configuratorInterier2.jpg"
          alt=""
          className="rounded-full w-[4.444vw] aspect-square"
        />
      </div>
      <p className="btns font-medium">Конфигуратор интерьера</p>
    </motion.div>
  );
}