Untitled

import React, { useState } from "react";

export default function RecipeCard({
  recipe,
  isSelected,
  onSelectChange,
  onUpdate,
  onDelete,
}) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedRecipe, setEditedRecipe] = useState(recipe);

  const handleEdit = () => {
    // reset editedRecipe to the latest recipe data
    setEditedRecipe(recipe);
    setIsEditing(true);
  };

  const handleSave = () => {
    onUpdate(editedRecipe);
    setIsEditing(false);
  };

  return (
    <div className="recipe-card recipe-card-view">
      {/* Selection Checkbox */}
      <input
        className="recipe-checkbox"
        type="checkbox"
        checked={isSelected}
        onChange={() => onSelectChange(recipe.id)}
      />

      {/* Title */}
      {isEditing ? (
        <input
          type="text"
          value={editedRecipe.title}
          onChange={(e) =>
            setEditedRecipe({ ...editedRecipe, title: e.target.value })
          }
          style={{ fontSize: "1.25rem", fontWeight: "600", marginBottom: "0.5rem" }}
        />
      ) : (
        <h3 style={{ marginBottom: "0.5rem" }}>{recipe.title}</h3>
      )}

      {/* Description */}
      {isEditing ? (
        <textarea
          value={editedRecipe.description}
          onChange={(e) =>
            setEditedRecipe({ ...editedRecipe, description: e.target.value })
          }
          rows={2}
          style={{ marginBottom: "0.5rem", width: "100%" }}
        />
      ) : (
        <p style={{ marginBottom: "0.5rem" }}>{recipe.description}</p>
      )}

      {/* Ingredients */}
      <p style={{ marginBottom: "0.5rem" }}>
        <strong>Ingredients:</strong>
      </p>
      {isEditing ? (
        <textarea
          value={Array.isArray(editedRecipe.ingredients)
            ? editedRecipe.ingredients.join(", ")
            : ""}
          onChange={(e) =>
            setEditedRecipe({
              ...editedRecipe,
              ingredients: e.target.value
                .split(",")
                .map((item) => item.trim())
                .filter(Boolean),
            })
          }
          rows={2}
          style={{ marginBottom: "0.5rem", width: "100%" }}
        />
      ) : Array.isArray(recipe.ingredients) && recipe.ingredients.length > 0 ? (
        <ul className="ingredient-list" style={{ marginBottom: "0.5rem" }}>
          {recipe.ingredients.map((ing, idx) => (
            <li key={idx}>{ing}</li>
          ))}
        </ul>
      ) : (
        <p>No ingredients listed.</p>
      )}

      {/* Steps */}
      <p style={{ marginBottom: "0.5rem" }}>
        <strong>Steps:</strong>
      </p>
      {isEditing ? (
        <textarea
          value={Array.isArray(editedRecipe.steps)
            ? editedRecipe.steps.join(", ")
            : ""}
          onChange={(e) =>
            setEditedRecipe({
              ...editedRecipe,
              steps: e.target.value
                .split(",")
                .map((item) => item.trim())
                .filter(Boolean),
            })
          }
          rows={2}
          style={{ marginBottom: "0.5rem", width: "100%" }}
        />
      ) : Array.isArray(recipe.steps) && recipe.steps.length > 0 ? (
        <ol className="step-list" style={{ marginBottom: "0.5rem" }}>
          {recipe.steps.map((step, idx) => (
            <li key={idx}>{step}</li>
          ))}
        </ol>
      ) : (
        <p>No steps listed.</p>
      )}

      {/* Tags */}
      <p style={{ marginBottom: "0.5rem" }}>
        <strong>Tags:</strong>
      </p>
      {isEditing ? (
        <input
          type="text"
          value={Array.isArray(editedRecipe.tags)
            ? editedRecipe.tags.join(", ")
            : ""}
          onChange={(e) =>
            setEditedRecipe({
              ...editedRecipe,
              tags: e.target.value
                .split(",")
                .map((item) => item.trim())
                .filter(Boolean),
            })
          }
          style={{ marginBottom: "0.5rem", width: "100%" }}
        />
      ) : Array.isArray(recipe.tags) && recipe.tags.length > 0 ? (
        <p style={{ marginBottom: "0.5rem" }}>{recipe.tags.join(", ")}</p>
      ) : (
        <p>No tags listed.</p>
      )}

      {/* Difficulty & Last Updated */}
      <p style={{ marginBottom: "0.3rem" }}>
        <strong>Difficulty:</strong>{" "}
        {isEditing ? (
          <select
            value={editedRecipe.difficulty}
            onChange={(e) =>
              setEditedRecipe({ ...editedRecipe, difficulty: e.target.value })
            }
          >
            <option value="Easy">Easy</option>
            <option value="Medium">Medium</option>
            <option value="Hard">Hard</option>
          </select>
        ) : (
          recipe.difficulty
        )}
      </p>

      <p style={{ marginBottom: "0.75rem" }}>
        <strong>Last Updated:</strong>{" "}
        {new Date(recipe.lastUpdated).toLocaleString()}
      </p>

      {/* Button Group: hidden by default, shows on hover */}
      <div className="button-group">
        {isEditing ? (
          <button className="btn btn-edit" onClick={handleSave}>
            Save
          </button>
        ) : (
          <button className="btn btn-edit" onClick={handleEdit}>
            Edit
          </button>
        )}
        <button className="btn btn-delete" onClick={() => onDelete(recipe.id)}>
          Delete
        </button>
      </div>
    </div>
  );
}