"use client";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import AnimatedSection from "./AnimatedSection";
import { AWS_CDN_URL } from "@/utils/staticValues";

type Story = {
  id: number;
  slug: string;
  title: string;
  subtitle: string;
  thumbnail?: string;
  pieceThumbnail?: string;
  designHouse?: string;
};

export default function StoryCard({ story }: { story: Story }) {
  const pieceVariants = {
    initial: { opacity: 0, scale: 0, rotate: -12 },
    hover: { opacity: 1, scale: 1, rotate: 12 },
  };

  return (
    <AnimatedSection>
      <motion.div whileHover="hover" initial="initial">
        <Link
          key={story.id}
          href={`/stories/${story.slug}`}
          className="group relative flex border border-gray-950/25 bg-gray-950/30 p-1 md:p-3"
        >
          <motion.div
            variants={pieceVariants}
            transition={{
              type: "spring",
              stiffness: 200,
              damping: 25,
              duration: 1,
            }}
            className="absolute -right-0 -bottom-2 z-1 flex h-50 w-40 flex-col border bg-gray-100 py-2 shadow-lg"
          >
            <div className="flex flex-row items-end justify-end align-bottom">
              <div className="flex scale-75 flex-row gap-1 pb-1">
                <div className="flex gap-4">
                  <Image
                    src="/images/morni-wordmark-logo.png"
                    alt="morni brand logo"
                    width={56}
                    height={16}
                  />
                </div>
              </div>
            </div>
            <div className="flex h-full w-full items-center justify-center overflow-hidden align-middle">
              {story.pieceThumbnail && (
                <Image
                  src={`${AWS_CDN_URL}/${story.pieceThumbnail}`}
                  alt={story.title}
                  width={600}
                  height={1000}
                  className="img-responsive"
                />
              )}
            </div>
          </motion.div>

          <div className="relative h-52 w-full overflow-hidden border-1 border-dashed border-gray-100/75 p-2 pb-0 group-hover:border-gray-100 md:h-80 md:border-2 md:p-4 md:pb-0">
            <div className="absolute top-0 left-0 h-full w-full bg-teal-600/25 opacity-75 blur-[40px]" />
            <div className="align-center relative z-10 flex items-center justify-center p-1 md:p-2">
              <h4 className="storyHeading line-clamp-3 text-center font-medium text-gray-100 capitalize">
                {story.title}
              </h4>
            </div>
            <div className="relative flex w-full items-center justify-center overflow-hidden align-top">
              <div className="mx-auto flex aspect-[4/5] h-42 md:h-64">
                {story.thumbnail && (
                  <Image
                    src={`${AWS_CDN_URL}/${story.thumbnail}`}
                    alt={story.title}
                    width={800}
                    height={1000}
                    className="aspect-[4/5] h-full w-full object-cover object-center"
                  />
                )}
              </div>
            </div>
          </div>
        </Link>
      </motion.div>
    </AnimatedSection>
  );
}