import React, { useEffect, useState } from 'react';
import api from '../api';
import { Recipe } from '../types';

const RecipeList: React.FC = () => {
  const [recipes, setRecipes] = useState<Recipe[]>([]);
  const [error, setError] = useState('');

  const fetchRecipes = async () => {
    try {
      const resp = await api.get<Recipe[]>('/recipes/');
      setRecipes(resp.data);
    } catch (err: any) {
      setError('Failed to load recipes');
    }
  };

  useEffect(() => {
    fetchRecipes();
  }, []);

  return (
    <div>
      <h2>Recipes</h2>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {recipes.map(r => (
          <li key={r.id}>
            <h3>{r.title}</h3>
            <p>{r.description}</p>
            <pre>Ingredients:\n{r.ingredients}</pre>
            <pre>Steps:\n{r.steps}</pre>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RecipeList;