recipe_app/frontend/src/pages/RecipePage.tsx

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { getRecipeById } from "../services/frontendApi.js";
import { type Recipe, type Ingredient } from "../types/Recipe"

function RecipePage() {
  const [recipe, setRecipe] = useState<Recipe>({
    details: {},
    ingredients: [],
    steps: {}
  });
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const { id } = useParams();

  useEffect(() => {
    const loadRecipe = async () => {
      try {
        const recipe = await getRecipeById(id);
        setRecipe(recipe);
        console.log(recipe)
      } catch (error) {
        console.log(error);
        setError("Failed to load recipes...");
      } finally {
        setLoading(false);
      }
    };
    loadRecipe();
  }, [id]);
  console.log(recipe)
  return (
    <div className="recipe">

      {error && <div className="error-message">{error}</div>}

      {loading ? (
        <div className="loading">Loading...</div>
      ) : (

        <div className="recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
          <div className="border-b-2 border-amber-300 pb-4 mb-6">
            <h3 className="text-2xl md:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
            <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
          </div>

          <div className="grid md:grid-cols-2 gap-6 mb-6">
            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                Ingredients:
              </h4>
              <ul className="space-y-2">
                {recipe.ingredients.map((ingredient: Ingredient, index) => (
                  <li key={index} className="text-gray-700 flex items-start">
                    <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="font-medium">{ingredient.quantity} {ingredient.unit} {ingredient.name}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                Instructions:
              </h4>
              <ol className="space-y-3">
                {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
                  <li key={stepNumber} className="text-gray-700 flex items-start">
                    <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
                      {stepNumber}
                    </span>
                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)]}</span>
                  </li>
                ))}
              </ol>
            </div>
          </div>

          <div className="border-t-2 border-amber-300 pt-4">
            <div className="flex justify-between items-center text-sm text-amber-600">
              <span>From the Kitchen of</span>
              <span>★ ★ ★</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default RecipePage;