import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

import Image from "next/image";
  import React from "react";
  import { cn } from "@/lib/utils";
  
  interface InfoCardProps {
    imageSrc?: string;
    category?: string;
    title?: string;
    description?: string;
    author?: string;
    dateOrPlace?: string;
    className?: string;
  }
  
  function InfoCard({
    imageSrc = "/test.jpg",
    category = "Vigilante",
    title = "The Dark Knight Rises",
    description = "When Gotham falls into chaos, a silent guardian rises from the shadows to restore justice.",
    author = "Bruce Wayne",
    dateOrPlace = "Gotham City",
    className,
  }: InfoCardProps) {
    return (
      <div className={cn("flex justify-center items-center", className)}>
        <div className="group relative w-[320px] rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
          {/* Image Section */}
          <div className="relative h-52 w-full overflow-hidden">
            <Image
              src={imageSrc}
              alt={title}
              fill
              className="object-cover transition-transform duration-700 group-hover:scale-110"
            />
            {/* Gradient Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent" />
          </div>
  
          {/* Content */}
          <div className="p-5">
            <span className="inline-block px-3 py-1 text-xs font-medium rounded-full mb-3 bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
              {category}
            </span>
  
            <h3 className="text-lg font-semibold text-zinc-900 dark:text-white mb-2 group-hover:text-amber-600 transition-colors duration-300">
              {title}
            </h3>
  
            <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
              {description}
            </p>
  
            <div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex justify-between text-xs text-zinc-500 dark:text-zinc-400">
              <span>By {author}</span>
              <span>{dateOrPlace}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
  
  export default InfoCard;