"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { MapPin, Calendar, Users, Star } from "lucide-react";

const MotionLink = motion.create(Link);

export interface GlobalCardData {
  id: string | number;
  title: string;
  image: string;
  location?: string;
  price?: string | number;
  rating?: number;
  duration?: string;
  category?: "Tour" | "Event" | "Flight" | "Promo";
  href: string;
}

interface GlobalCardProps {
  data: GlobalCardData;
}

export function GlobalCard({ data }: GlobalCardProps) {
  return (
    <motion.div
      whileHover={{ y: -8, transition: { duration: 0.3 } }}
      className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:shadow-black/5 transition-shadow duration-300 border border-gray-100"
    >
      {/* Image Container with Scale Effect */}
      <div className="relative w-full h-56 overflow-hidden">
        <Image
          src={data.image}
          alt={data.title}
          fill
          className="object-cover transition-transform duration-500 ease-out group-hover:scale-110"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
        
        {/* Category Badge */}
        {data.category && (
          <div className="absolute top-4 left-4 z-10 bg-ranata-light/90 text-white text-[11px] font-bold px-3 py-1.5 rounded-full shadow-md backdrop-blur-sm">
            {data.category}
          </div>
        )}

        {/* Rating Badge */}
        {data.rating && (
          <div className="absolute top-4 right-4 z-10 bg-white/90 backdrop-blur-md text-slate-800 text-[11px] font-bold px-2 py-1.5 rounded-xl shadow-sm flex items-center gap-1">
            <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
            {data.rating}
          </div>
        )}
      </div>

      {/* Content Area */}
      <div className="p-5 flex flex-col flex-grow">
        <h3 className="text-lg font-bold text-slate-900 line-clamp-1 mb-2 group-hover:text-ranata-light transition-colors">
          {data.title}
        </h3>

        <div className="flex items-center gap-3 text-xs text-gray-500 mb-4">
          {data.location && (
            <div className="flex items-center gap-1">
              <MapPin className="w-3.5 h-3.5" />
              <span className="line-clamp-1">{data.location}</span>
            </div>
          )}
          {data.duration && (
            <div className="flex items-center gap-1">
              <Calendar className="w-3.5 h-3.5" />
              <span>{data.duration}</span>
            </div>
          )}
        </div>

        <div className="mt-auto pt-4 border-t border-gray-100 flex items-center justify-between">
          <div className="flex flex-col">
            <span className="text-[10px] text-gray-400 font-medium uppercase tracking-wider">Mulai dari</span>
            <span className="text-base font-black text-ranata-dark">
              {typeof data.price === "number" ? `Rp ${data.price.toLocaleString("id-ID")}` : data.price || "Hubungi Kami"}
            </span>
          </div>
          
          {/* External Link or Internal Link handling */}
          {data.href.startsWith("http") ? (
            <motion.a
              href={data.href}
              target="_blank"
              rel="noopener noreferrer"
              whileTap={{ scale: 0.95 }}
              className="rounded-full bg-ranata-light text-white px-4 py-2 text-xs font-bold hover:bg-ranata-dark transition-colors shadow-md shadow-ranata-light/20 inline-block text-center"
            >
              Lihat Detail
            </motion.a>
          ) : (
            <MotionLink
              href={data.href}
              whileTap={{ scale: 0.95 }}
              className="rounded-full bg-ranata-light text-white px-4 py-2 text-xs font-bold hover:bg-ranata-dark transition-colors shadow-md shadow-ranata-light/20 inline-block text-center"
            >
              Lihat Detail
            </MotionLink>
          )}
        </div>
      </div>
    </motion.div>
  );
}