moviebox/src/components/atoms/MovieCard/layouts/MinimalLayout.tsx

"use client";
import { FC } from "react";
import { ReadMore } from "../../ReadMore";
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
import { RxEyeOpen, RxEyeClosed } from "react-icons/rx";
import { IoMdRemoveCircleOutline } from "react-icons/io";
import { Movie } from "@/types/global";

interface MinimalLayoutProps extends Movie {
  showDayCounter?: boolean;
  simpleToggle?: boolean;
  alreadyInStore?: Movie | undefined;
  isReleased: boolean;
  handleAdd: () => void;
  handleRemove: () => void;
  handleSeen: () => void;
  handleFavorite: () => void;
  releaseDate: Date;
}

export const MinimalLayout: FC<MinimalLayoutProps> = ({
  title,
  overview,
  poster_path,
  vote_average,
  seen,
  favorite,
  alreadyInStore,
  isReleased,
  handleAdd,
  handleRemove,
  handleSeen,
  handleFavorite,
  releaseDate,
}) => {
  return (
    <article className="group relative w-full h-[420px] bg-gradient-to-br from-white/8 via-slate-800/5 to-white/5 border border-white/10 rounded-xl overflow-hidden transition-all duration-300 hover:bg-gradient-to-br hover:from-white/15 hover:to-white/8 hover:border-white/20 hover:shadow-lg hover:shadow-black/20">
      <figure className="relative h-[280px] overflow-hidden">
        <img
          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
          src={`http://image.tmdb.org/t/p/w342${poster_path}`}
          alt={title}
        />

        {/* Rating badge */}
        {!!vote_average && (
          <div className="absolute top-3 right-3 bg-gradient-to-br from-black/75 to-slate-900/80 px-2 pr-3 pb-1 rounded-full border border-white/10 shadow-lg">
            <span className="text-xs font-medium text-yellow-400">
              ★ {vote_average.toFixed(1)}
            </span>
          </div>
        )}

        {/* Action overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-slate-900/75 to-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
          {!alreadyInStore ? (
            <button
              onClick={handleAdd}
              className="bg-white text-black px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:bg-gray-100 hover:scale-105"
            >
              Add to List
            </button>
          ) : (
            <div className="flex gap-2">
              {isReleased && (
                <button
                  onClick={handleSeen}
                  className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
                    seen
                      ? "bg-green-500 text-white"
                      : "bg-white/20 text-white hover:bg-white/30"
                  }`}
                >
                  {seen ? <RxEyeOpen size={20} /> : <RxEyeClosed size={20} />}
                </button>
              )}
              <button
                onClick={handleFavorite}
                className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
                  favorite
                    ? "bg-red-500 text-white"
                    : "bg-white/20 text-white hover:bg-white/30"
                }`}
              >
                {favorite ? (
                  <MdFavorite size={20} />
                ) : (
                  <MdFavoriteBorder size={20} />
                )}
              </button>
              <button
                onClick={handleRemove}
                className="p-2 rounded-lg bg-white/20 text-white hover:bg-red-500 transition-all duration-200 hover:scale-110"
              >
                <IoMdRemoveCircleOutline size={20} />
              </button>
            </div>
          )}
        </div>
      </figure>

      {/* Content section */}
      <div className="p-4 flex flex-col justify-between">
        <div>
          <h3 className="font-semibold text-lg leading-tight line-clamp-2 mb-2 transition-colors duration-200 group-hover:text-white/90">
            {title}
          </h3>
          <div className="text-sm text-gray-400 leading-relaxed">
            <ReadMore text={overview} />
          </div>
        </div>

        <div className="flex items-center justify-between mt-3 pt-3 border-t border-white/10">
          <span className="text-xs text-gray-500 font-medium">
            {releaseDate.toLocaleDateString("pl-PL", {
              day: "numeric",
              month: "long",
              year: "numeric",
            })}
          </span>
          {alreadyInStore && (
            <div className="flex gap-1">
              {seen && (
                <div
                  className="w-2 h-2 bg-green-400 rounded-full"
                  title="Watched"
                />
              )}
              {favorite && (
                <div
                  className="w-2 h-2 bg-red-400 rounded-full"
                  title="Favorite"
                />
              )}
            </div>
          )}
        </div>
      </div>
    </article>
  );
};