import { useEffect, useState } from "react";
import * as api from "../api"; // Импортируем все функции из api/index.js
import Header from "../components/Header";
import Footer from "../components/Footer";

export default function Dashboard() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    api
      .getAllItems()
      .then((res) => {
        setItems(res.data);
      })
      .catch((err) => {
        console.error("Ошибка при получении товара с сервера", err);
      });
  }, []);

  return (
    <div>
      <Header />
      <div className="p-4 flex flex-col w-full gap-4">
        {Array.isArray(items) &&
          items.map((item) => (
            <div
              key={item.id}
              className="bg-white flex flex-col justify-center items-start p-4 border border-slate-500 rounded-lg shadow-sm"
            >
              <div className="text-gray-500 text-xs">ID: ${item.id}</div>
              <div className="text-xl font-black text-slate-800">
                {item.name}
              </div>
              <div className="text-xl font-black text-slate-800">
                {item.price}
              </div>
              <div className="text-xl font-black text-slate-800">
                {item.name}
              </div>
              <div className="text-xl font-black text-slate-800">
                {item.category}
              </div>
              <div className="text-xl font-black text-slate-800">
                {item.unit}
              </div>
            </div>
          ))}
      </div>
      <Footer />
    </div>
  );
}