/* eslint-disable react/prop-types */
import { Clock, Users } from 'lucide-react';

export const RecipeCard = ({ recipe, onClick }) => (
  <div className="recipe-card" onClick={() => onClick(recipe)}>
    <img src={recipe.image} alt={recipe.title} className="recipe-image" />
    <div className="recipe-content">
      <h3 className="recipe-title">{recipe.title}</h3>
      <div className="recipe-info">
        <div className="info-item">
          <Clock className="info-icon" />
          {recipe.readyInMinutes || '30'} mins
        </div>
        <div className="info-item">
          <Users className="info-icon" />
          {recipe.servings || '4'} servings
        </div>
        {console.log(recipe.servings)}

       

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