import * as React from "react";
import { Link } from "react-router-dom";
import { useRecipes } from "../../hooks";

export default function Recipes() {
  const recipes = useRecipes();

  return (
    <>
      <h2>Рецепты</h2>
      <p>
        <Link to="/recipes/create">+ Добавить новый рецепт</Link>
      </p>
      <table>
        <tbody>
          {recipes.map(({ id, title }) => (
            <tr key={id}>
              <td>
                <Link to={`/recipes/${id}`}>{title}</Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}