import React from "react";
import { Link } from "react-router-dom";
import "./CategoriesPage.css";

function CategoriesPage() {
  const categories = [
    {
      id: "salads",
      name: "Салаты",
      imageUrl: "",
      description: "Вкусные и полезные салаты на любой вкус.",
    },
    {
      id: "soups",
      name: "Супы",
      imageUrl: "",
      description: "Согревающие и сытные супы.",
    },
    {
      id: "main-courses",
      name: "Основные блюда",
      imageUrl: "",
      description: "Разнообразие основных блюд для всей семьи.",
    },
    {
      id: "desserts",
      name: "Десерты",
      imageUrl: "",
      description: "Сладкие угощения для сладкоежек.",
    },
  ];

  return (
    <div className="categories-page">
      <h1>Категории рецептов</h1>
      <div className="category-grid">
        {categories.map((category) => (
          <Link
            to={`/category/${category.id}`}
            key={category.id}
            className="category-card"
          >
            {category.imageUrl && (
              <img src={category.imageUrl} alt={category.name} />
            )}
            <h3>{category.name}</h3>
            {category.description && <p>{category.description}</p>}{" "}
          </Link>
        ))}
      </div>
    </div>
  );
}

export default CategoriesPage;
