"use client";
import Image, { StaticImageData } from "next/image";
import { InfiniteMarquee } from "@/components/ui";
import { cn } from "@/lib/utils";
import { ReactNode, useRef } from "react";
import { motion, useInView } from "motion/react";

type ContigoCardProps = {
  title: string;
  reverse?: boolean;
  description: string[];
  imgSubject: StaticImageData;
  imgBg: StaticImageData;
  children?: ReactNode;
  infiniteMarqueeStyles?: string;
};

const ContigoCard = ({
  title,
  reverse = false,
  description,
  imgSubject,
  imgBg,
  children,
  infiniteMarqueeStyles,
}: ContigoCardProps) => {
  const ref = useRef<HTMLDivElement>(null);

  const isInView = useInView(ref, {
    once: true,
    amount: 0.5,
  });

  return (
    <section className="mt-10 md:mt-14 lg:mt-18.5" ref={ref}>
      <div className="contigo-container">
        <h2 className="text-center contigo-section-title-contigo mb-4 md:mb-8">
          {title}
        </h2>
        <div
          className={cn(
            "flex flex-col gap-5 items-center",
            reverse ? "md:flex-row-reverse" : "md:flex-row",
          )}
        >
          <div className="md:basis-[62%] rounded-3xl lg:rounded-[2.25rem] overflow-hidden relative">
            <motion.div
              className="size-full"
              animate={{
                scale: isInView ? 1 : 2,
                y: isInView ? 0 : "-50%",
                transition: { duration: 2 },
              }}
            >
              <Image src={imgBg} alt="" className="size-full object-cover" />
            </motion.div>
            <div className="w-full">
              <InfiniteMarquee
                className={cn(
                  "h-[86%] text-contigo-verde top-[7%]",
                  infiniteMarqueeStyles,
                )}
              />
            </div>
            <motion.div
              className="absolute top-0 left-0 size-full"
              animate={{
                scale: isInView ? 1 : 3,
                y: isInView ? 0 : "100%",
                x: isInView ? 0 : "50%",
                transition: { duration: 2 },
              }}
            >
              <Image
                src={imgSubject}
                alt="Imagen decorativa"
                className="w-3/4 h-auto object-cover"
              />
            </motion.div>
          </div>
          <div className="md:basis-[38%] space-y-5 lg:space-y-8 text-[0.875rem] md:text-[min(1.6vw,1.3125rem)] leading-normal">
            {description.map((p, i) => (
              <p
                key={i}
                dangerouslySetInnerHTML={{ __html: p }}
                className="leading-[inherit]"
              />
            ))}
            {children}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContigoCard;