import { MapPin, Calendar, ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';

interface EventCardProps {
  id: string;
  title: string;
  image: string;
  date: string;
  location: string;
  price: string;
  organizer: string;
  status?: string;
  isAvailable?: boolean;
}

export default function EventCard({
  id,
  title,
  image,
  date,
  location,
  price,
  organizer,
  status = "ON SALE",
  isAvailable = true,
}: EventCardProps) {
  return (
    <div className="group flex flex-col bg-white brutal-card h-full">
      
      {/* Image Container */}
      <div className="relative h-56 overflow-hidden brutal-border m-2 border-b-4">
        <div className="absolute inset-0 bg-brutal-yellow animate-pulse" />
        <img 
          src={image} 
          alt={title}
          className={`absolute inset-0 w-full h-full object-cover grayscale contrast-125 transition-transform duration-500 group-hover:scale-110 group-hover:grayscale-0 ${!isAvailable ? 'opacity-70' : ''}`}
          loading="lazy"
        />
        
        {/* Status Badge */}
        <div className="absolute top-4 left-4 z-10">
          <span className={`px-4 py-2 text-sm font-black uppercase brutal-border ${
            isAvailable 
              ? 'bg-brutal-pink text-black brutal-shadow-sm' 
              : 'bg-white text-black brutal-shadow-sm'
          }`}>
            {status}
          </span>
        </div>
      </div>

      {/* Content Container */}
      <div className="flex flex-col flex-1 p-5 sm:p-6">
        <h3 className="font-display text-2xl font-black text-black mb-4 line-clamp-2 leading-tight uppercase group-hover:text-brutal-pink transition-colors">
          {title}
        </h3>
        
        <div className="space-y-3 mb-6 mt-auto">
          <div className="flex items-center gap-3 text-black font-bold text-sm uppercase">
            <MapPin className="w-5 h-5 shrink-0 stroke-[3]" />
            <span className="truncate">{location}</span>
          </div>
          <div className="flex items-center gap-3 text-black font-bold text-sm uppercase">
            <Calendar className="w-5 h-5 shrink-0 stroke-[3]" />
            <span>{date}</span>
          </div>
        </div>

        {/* Footer Area */}
        <div className="pt-4 mt-auto border-t-4 border-black flex items-center justify-between">
          <div>
            <p className="text-sm font-black text-black mb-1 uppercase">START FROM</p>
            {isAvailable ? (
              <p className="font-display font-black text-xl text-black">
                {price}
              </p>
            ) : (
              <p className="text-sm font-bold text-gray-500 uppercase">
                Habis
              </p>
            )}
            <p className="text-xs font-bold text-black mt-1 uppercase">BY: {organizer}</p>
          </div>

          {isAvailable ? (
            <Link 
              to={`/event/${id}`}
              className="flex items-center gap-2 px-5 py-3 text-sm uppercase bg-brutal-blue brutal-btn"
            >
              BELI TIKET
              <ArrowRight className="w-5 h-5 stroke-[3]" />
            </Link>
          ) : (
            <button 
              className="flex items-center gap-2 px-5 py-3 text-sm uppercase bg-gray-200 border-4 border-black font-bold text-gray-500 cursor-not-allowed"
            >
              CLOSE
              <ArrowRight className="w-5 h-5 stroke-[3]" />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}