import { ExperienceSection } from "@/src/data/resort";
import { getCloudinaryUrl } from "@/src/lib/cloudinary";
import Link from "next/link";
import Image from "next/image";

interface ExperienceCardProps {
  experience: ExperienceSection;
  lang: "tr" | "en" | "de";
}

export default function ExperienceCard({ experience, lang }: ExperienceCardProps) {
  return (
    <Link 
      href={experience.href}
      className="group relative overflow-hidden rounded-2xl aspect-square block"
    >
      <Image
        src={getCloudinaryUrl(experience.imageId, { width: 800, height: 800, crop: "fill" })}
        alt={experience.title[lang]}
        fill
        className="object-cover transition-transform duration-1000 group-hover:scale-110 group-hover:rotate-1"
      />
      
      {/* Dark Overlay */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 transition-opacity duration-700 group-hover:opacity-40" />
      
      {/* Minimal Gold Border Hover */}
      <div className="absolute inset-4 border border-white/0 transition-all duration-700 group-hover:border-gold/30 group-hover:backdrop-blur-[2px] flex items-center justify-center">
        <span className="text-white text-xs font-bold tracking-[0.4em] opacity-0 translate-y-4 transition-all duration-700 group-hover:opacity-100 group-hover:translate-y-0 border-b border-gold pb-1">
          {lang === "tr" ? "KEŞFET" : lang === "en" ? "EXPLORE" : "ENTDECKEN"}
        </span>
      </div>

      {/* Content */}
      <div className="absolute bottom-8 left-8 text-white group-hover:opacity-0 transition-opacity duration-500">
        <h3 className="text-2xl font-serif font-bold mb-1 tracking-wider">{experience.title[lang]}</h3>
        <p className="text-white/70 text-[10px] uppercase tracking-[0.2em] font-medium">{experience.subtitle[lang]}</p>
      </div>
    </Link>
  );
}