import { useState, useEffect } from "react";

import { getTopItems } from "../api/index";

export default function AdminItems() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  const loadItems = () => {
    getTopItems()
      .then((res) => {
        setItems(res.data);
      })
      .catch(() => { })
      .finally(() => setLoading(false));
  };

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

  if (loading) return <p className="text-white/60">Загрузка...</p>;

  return (
    <div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm text-left">
          <thead className="text-white/50 uppercase text-xs border-b border-white/10">
            <tr>
              <th className="py-3 pr-4">Название</th>
              <th className="py-3 pr-4">Общая стоимость продаж</th>
              <th className="py-3 pr-4">Цена</th>
              <th className="py-3 pr-4">Проданный объем</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item) => (
              <tr
                key={item.id}
                className="border-b border-white/5 hover:bg-white/5 transition-colors"
              >
                <td className="py-3 pr-4 font-medium">{item.name}</td>
                <td className="py-3 pr-4 text-white/70">{item.revenue}</td>
                <td className="py-3 pr-4">{item.price} ₽</td>
                <td className="py-3 pr-4">
                  {item.sale_quantity} {item.unit}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
