import React from 'react';
import { X, MapPin, Calendar, Sparkles } from 'lucide-react';
import { PortfolioItem } from '../types';

interface LightboxProps {
  item: PortfolioItem | null;
  onClose: () => void;
  onConsult: (title: string) => void;
}

export const Lightbox: React.FC<LightboxProps> = ({ item, onClose, onConsult }) => {
  if (!item) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-md animate-fadeIn">
      <div className="relative w-full max-w-4xl bg-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row max-h-[90vh]">
        
        {/* Close Button Floating */}
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/40 hover:bg-black/70 text-white transition-all md:text-gray-600 md:bg-gray-100 md:hover:bg-gray-200"
          aria-label="Tutup lightbox"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Image Section */}
        <div className="w-full md:w-3/5 bg-gray-900 flex items-center justify-center relative overflow-hidden min-h-[300px] md:min-h-0">
          <img 
            src={item.imageUrl} 
            alt={item.title} 
            className="w-full h-full object-cover max-h-[500px] md:max-h-none"
          />
          <div className="absolute top-4 left-4">
            <span className="px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-white/90 text-[#6B8E5A] shadow-md backdrop-blur-sm">
              {item.category}
            </span>
          </div>
        </div>

        {/* Content Section */}
        <div className="w-full md:w-2/5 p-6 sm:p-8 flex flex-col justify-between overflow-y-auto">
          <div>
            <div className="flex items-center gap-4 text-xs text-gray-500 mb-2 font-medium">
              <span className="flex items-center gap-1.5 text-[#6B8E5A]">
                <MapPin className="w-3.5 h-3.5" /> {item.location}
              </span>
              <span>•</span>
              <span className="flex items-center gap-1.5">
                <Calendar className="w-3.5 h-3.5" /> {item.year}
              </span>
            </div>

            <h3 className="text-2xl font-bold text-gray-900 mb-4 tracking-tight">
              {item.title}
            </h3>

            <p className="text-sm text-gray-600 leading-relaxed mb-6">
              {item.fullDesc || item.shortDesc}
            </p>
          </div>

          <div className="pt-6 border-t border-gray-100">
            <p className="text-xs text-gray-500 mb-3">Tertarik dengan konsep dekorasi serupa?</p>
            <button
              onClick={() => {
                onClose();
                onConsult(`Konsep sejenis ${item.title}`);
              }}
              className="w-full py-3 px-5 rounded-xl bg-[#6B8E5A] hover:bg-[#5A7B4A] text-white font-medium text-sm transition-all flex items-center justify-center gap-2 shadow-md shadow-[#6B8E5A]/20 cursor-pointer"
            >
              <Sparkles className="w-4 h-4 text-amber-200" />
              Konsultasikan Konsep Ini
            </button>
          </div>
        </div>

      </div>
    </div>
  );
};
