"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { Bookmark, CaretRight } from "@phosphor-icons/react";
import {
  AnimatePresence,
  m,
  MotionConfig,
  useAnimate,
} from "motion/react";
import React, { SetStateAction, useState } from "react";

const MotionBaseButton = m.create(BaseButton as any);

const transition = {
  type: "spring",
  bounce: 0.1,
  duration: 0.5,
};

type Movie = {
  item: number;
  name: string;
  preview: string;
};

const movies: Movie[] = [
  { item: 1, name: "Succession", preview: "/succession.jpeg" },
  { item: 2, name: "Black Mirror", preview: "/mirror.jpeg" },
  { item: 3, name: "Dune", preview: "/dune.jpg" },
];

const MovieGallery = () => {
  const [hover, setHover] = useState<Movie | null>(null);

  return (
    <MotionConfig transition={transition}>
      <div className="size-full  flex items-center justify-center">
        <div className="flex gap-5">
          {movies.map((movie, index) => (
            <Movie
              key={movie.name}
              setHover={setHover}
              hover={hover}
              movie={movie}
            />
          ))}
        </div>
      </div>
    </MotionConfig>
  );
};

interface MovieProps {
  hover: Movie | null;
  movie: Movie;
  setHover: React.Dispatch<SetStateAction<Movie | null>>;
}

const Movie = ({ setHover, hover, movie }: MovieProps) => {
  const [scope, animate] = useAnimate();
  const [isBookmarked, setIsBookmarked] = useState(false);

  const handleClick = () => {
    animate(scope.current, { rotate: [0, 20, -20, 0] }, { duration: 0.5 });
    setIsBookmarked((prev) => !prev);
  };

  return (
    <m.div
      className="border bg-background flex items-center justify-center rounded-3xl overflow-clip relative group"
      animate={{
        scaleX: hover && hover.item === movie.item ? 300 / 160 : 1,
        scaleY: 1,
        backgroundImage: `url(${movie.preview})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
      style={{ transformOrigin: "center" }}
      onMouseEnter={() => setHover(movie)}
      onMouseLeave={() => setHover(null)}
    >
      <div className="absolute flex items-end justify-center top-0 left-0 size-full bg-primary/20 transition-opacity duration-300 opacity-0 group-hover:opacity-100 text-white">
        <AnimatePresence>
          {hover && hover.item === movie.item && (
            <m.div
              className="w-full h-3/4 p-5 space-y-2"
              initial={{ x: 100, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              exit={{ x: 100, opacity: 0 }}
            >
              <m.h1
                layoutId={`movie-${movie.item}-title`}
                className="font-semibold text-xl"
              >
                {movie.name}
              </m.h1>
              <m.p
                className="min-w-80"
                layoutId={`movie-${movie.item}-description`}
              >
                nothing . {movie.item} . graound
              </m.p>
              <MotionBaseButton className="bg-primary/80 dark:bg-background text-sm flex gap-2 text-white items-center rounded-full px-3 py-1.5">
                Watch{" "}
                <span>
                  <CaretRight className="size-4" />
                </span>
              </MotionBaseButton>{" "}
            </m.div>
          )}
        </AnimatePresence>
        <BaseButton
          ref={scope}
          onClick={handleClick}
          className="absolute top-3 right-3 size-10 flex items-center justify-center outline-none"
        >
          <Bookmark
            className={`${isBookmarked ? "fill-white" : "fill-transparent"}`}
          />
        </BaseButton>
      </div>
    </m.div>
  );
};

export default MovieGallery;
Movie Gallery
