import React from "react";
import close from "../assets/cloceC1.png";

function RecipeModal({ recipe, onClose }) {
  if (!recipe) return null;
  return (
    <>
      {/* Recipe Modal Dialog */}
      <el-dialog>
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <div className="bg-white w-full max-w-lg rounded-lg p-5 overflow-y-auto max-h-[80vh] relative">
            <img
              src={close}
              alt=""
              className="closeIcon absolute w-8 h-8 cursor-pointer *:"
              onClick={onClose}
            />
            <h2 className="text-xl font-semibold mb-3">{recipe.name}</h2>

            <img
              src={recipe.thumbnail_url}
              alt={recipe.name}
              className="w-full h-full object-cover rounded mb-4"
            />

            {/* Ingredients which are required for preparing this dish*/}
            <h3 className="text-lg font-medium mb-2">Ingredients</h3>
            <ul className="list-disc pl-5 mb-4 text-sm">
              {recipe.sections?.[0]?.components?.map((item) => (
                <li key={item.id}>{item.raw_text}</li>
              ))}
            </ul>

            {/* Cooking Instructions */}
            <h3 className="text-lg font-medium mb-2">Instructions</h3>
            <ol className="list-decimal pl-5 text-sm space-y-2">
              {recipe.instructions?.map((step) => (
                <li key={step.id}>{step.display_text}</li>
              ))}
            </ol>

            {/* Close Modal Button */}
            <button
              onClick={onClose}
              className="mt-5 w-full bg-red-500 text-white py-2 rounded cursor-pointer"
            >
              Close
            </button>
          </div>
        </div>
      </el-dialog>
    </>
  );
}

export default RecipeModal;