import { cn } from "@/lib/utils";
import Image from "next/image";
import { GalleryBase } from "@/components/general/gallery/gallery-content";

export type GalleryCardProps<T extends GalleryBase> = {
  item: T;
};

const GalleryCard = <T extends GalleryBase>({ item }: GalleryCardProps<T>) => {
  const { img, title, description } = item;

  const transitionProps = "transition-transform will-change-transform duration-500 ease-in-out";

  return (
    <div className="rounded-[0.875rem] overflow-hidden md:rounded-none h-[28.125rem] md:h-fit group">
      <div className="relative h-full">
        <Image
          src={img.src}
          alt={img.alt}
          className={cn(
            "size-full max-h-[100svh] object-cover object-top md:translate-y-[0.0625rem] md:group-hover:-translate-y-[var(--height)]",
            transitionProps
          )}
        />

        <div
          className={cn(
            "bg-contigo-verde h-[var(--height)] md:h-[var(--height)] flex flex-col justify-center items-center text-center absolute w-full bottom-0 md:translate-y-[var(--height)] md:group-hover:translate-y-0 px-2",
            transitionProps
          )}
        >
          <h2 dangerouslySetInnerHTML={{ __html: title }} className="font-medium" />
          {description && <p className="mt-3 lg:mt-5" dangerouslySetInnerHTML={{ __html: description }} />}
        </div>
      </div>
    </div>
  );
};

export default GalleryCard;