import { useState } from 'react';
import { type MenuItem } from '../types';

interface MenuItemCardProps {
  item: MenuItem;
}

function MenuItemCard({ item }: MenuItemCardProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleImageClick = () => {
    if (item.image) {
      setIsModalOpen(true);
    }
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const handleModalOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      handleCloseModal();
    }
  };

  return (
    <>
      <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 border border-gray-200">
        {item.image && (
          <div className="h-48 overflow-hidden cursor-pointer" onClick={handleImageClick}>
            <img
              src={`/images/${item.image}`}
              alt={item.name}
              className="w-full h-full object-cover"
            />
          </div>
        )}
        <div className="p-6">
          <div className="flex justify-between items-start mb-2">
            <h3 className="text-xl font-semibold text-gray-800">{item.name}</h3>
            <span className="text-lg font-bold text-amber-700">
              ${item.price.toFixed(2)}
            </span>
          </div>

          <p className="text-gray-600 mb-4 text-sm leading-relaxed">
            {item.description}
          </p>

          {item.dietary.length > 0 && (
            <div className="flex flex-wrap gap-2 mb-3">
              {item.dietary.map((tag) => (
                <span
                  key={tag}
                  className="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full capitalize"
                >
                  {tag}
                </span>
              ))}
            </div>
          )}

          {item.allergens && item.allergens.length > 0 && (
            <div className="text-xs text-gray-500">
              <span className="font-medium">Allergens: </span>
              {item.allergens.join(', ')}
            </div>
          )}
        </div>
      </div>

      {isModalOpen && item.image && (
        <div
          className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
          onClick={handleModalOverlayClick}
        >
          <div className="relative max-w-4xl max-h-[90vh] p-4">
            <button
              onClick={handleCloseModal}
              className="absolute -top-3 -right-3 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-600 hover:text-red-600 hover:bg-red-50 transition-all duration-200"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
              </svg>
            </button>
            <img
              src={`/images/${item.image}`}
              alt={item.name}
              className="max-w-full max-h-[85vh] object-contain rounded-lg"
            />
          </div>
        </div>
      )}
    </>
  );
}

export default MenuItemCard;
