import Image from "next/image";
  import React from "react";
  
  function ZoomOutCard() {
    return (
      <div className="flex justify-center items-center py-20">
        
        <div className="group relative max-w-sm cursor-pointer [perspective:1000px]">
  
          <div
            className="absolute inset-0 transition-all duration-500 rounded-2xl 
                          bg-gradient-to-r from-zinc-200 via-zinc-800 to-zinc-200 
                          dark:from-zinc-800 dark:via-white dark:to-zinc-800 
                          opacity-20 group-hover:opacity-100 group-hover:blur-sm"
          />
          
          <div
            className="relative flex flex-col items-center justify-center overflow-hidden rounded-2xl border border-zinc-200 bg-white p-6 transition-all duration-500 
                          dark:border-zinc-800 dark:bg-zinc-950 
                          [transform-style:preserve-3d] group-hover:[transform:rotateX(10deg)_rotateY(-10deg)_translateZ(20px)]"
          >
            
            <div className="relative h-64 w-full overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-900">
              <Image
                height={500}
                width={500}
                src="https://res.cloudinary.com/dmqwpwo6c/image/upload/v1776147234/test_nj6ubt.jpg"
                alt="Card Cover"
                className="h-full w-full object-cover transition-transform duration-700 ease-out 
                           scale-150 group-hover:scale-100 grayscale group-hover:grayscale-0"
              />
              
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
            </div>
  
            <div className="mt-6 text-center transition-all duration-500 [transform:translateZ(30px)]">
              <h3 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">
                The Dark Knight
              </h3>
  
              <div className="mx-auto my-3 h-[1px] w-0 bg-zinc-900 transition-all duration-500 group-hover:w-full dark:bg-white" />
  
              <p className="text-sm leading-relaxed text-zinc-500 transition-colors duration-500 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-200">
                You either die a hero, or you live long enough to see yourself
                become the villain.
              </p>
            </div>
            <button
              className="mt-6 translate-y-10 rounded-full bg-zinc-900 px-6 py-2 text-xs font-medium text-white opacity-0 transition-all duration-500 
                               group-hover:translate-y-0 group-hover:opacity-100 dark:bg-white dark:text-black"
            >
              Explore Details
            </button>
          </div>
  
          <div className="absolute -inset-1 -z-10 scale-95 bg-zinc-200 opacity-0 blur-2xl transition-all duration-500 group-hover:scale-100 group-hover:opacity-50 dark:bg-zinc-800" />
        </div>
      </div>
    );
  }
  
  export default ZoomOutCard;