"use client";


import { AWS_CDN_URL } from "@/utils/staticValues";
import { motion, useScroll, useTransform } from "framer-motion";
import Image from "next/image";
import { useRef } from "react";

type Props = { coverTitle: string; subtitle: string; cover: string };

export default function StoryCover({ coverTitle, subtitle, cover }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });

  const rotate = useTransform(scrollYProgress, [0, 1], ["16deg", "-8deg"]);
  const scale = useTransform(scrollYProgress, [0, 1], [1.25, 0.75]);

  return (
    <div
      ref={ref}
      className="mt-8 grid grid-cols-1 items-start gap-8 align-middle will-change-transform md:mt-16 md:grid-cols-5"
    >
      {/* Left Text Section */}
      <div className="col-span-1 md:col-span-3">
        <div className="flex flex-col gap-8">
          <h1 className="largeTitle">
            Welcome to {coverTitle} co-creation journey
          </h1>
          <div className="hidden w-full flex-col border-l pl-4 md:flex md:h-[40vh] md:pl-16">
            <p className="font-bogart text-xl font-light -tracking-wider md:text-3xl">
              {subtitle}
            </p>
          </div>
        </div>
      </div>

      {/* Right Image Section */}
      <div className="col-span-1 mt-4 border-l md:col-span-2 md:mt-0 md:border-0">
        <div className="flex w-full flex-col pl-4 md:hidden md:pl-16">
          <p className="font-bogart text-xl font-light -tracking-wider md:text-3xl">
            {subtitle}
          </p>
        </div>
        <div className="mx-auto mt-8 flex w-[80%] md:mt-0 items-end justify-end md:w-full">
          <motion.div
            style={{ rotate, scale }}
            className="w-full bg-white p-4 md:p-6 pb-12 md:w-[92%] shadow-2xl full md:pb-18"
          >
            <div className="border relative">
              <Image
                src={`${AWS_CDN_URL}/${cover}`}
                alt={coverTitle}
                width={800}
                height={1000}
                priority
                className="aspect-[4/5] relative z-1"
              />
              <div className="mob-noise absolute left-0 top-0 h-full w-full z-3 opacity-30" />
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}