/* eslint-disable react/no-unknown-property */
/* eslint-disable react/prop-types */
import { Clock, Users, BookOpen } from "lucide-react";
import { closeIcon } from "../../svgIcons/svgIcons";

export const RecipeDetails = ({ recipe, onClose }) => {
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose} className="close-button">
          {closeIcon}
        </button>
        <h2 className="modal-title">{recipe?.title}</h2>
        <img src={recipe?.image} alt={recipe?.title} className="modal-image" />
        <div className="recipe-info">
          <div className="info-item">
            <Clock />
            {recipe?.readyInMinutes || "N/A"} mins
          </div>
          <div className="info-item">
            <Users />
            {recipe?.servings || (recipe?.readyInMinutes > 30 ? "6" : "2")}{" "}
            servings
          </div>
          <div>
            <span>
              <BookOpen /> <b>Directions</b>
            </span>
            <br />
            {recipe?.instructions || "N/A"}
          </div>
        </div>
      </div>
    </div>
  );
};