import { useState, useCallback } from "react";
import { invoke } from "@tauri-apps/api/core";

interface Item { id: string; name: string; }

export default function MyPanel() {
  const [items, setItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true); setError(null);
    try {
      setItems(await invoke<Item[]>("get_items"));
    } catch (e) {
      setError(String(e));
    } finally {
      setLoading(false);
    }
  }, []);

  return (
    <div className="panel-container">
      <div className="panel-header">
        <h3>My Panel</h3>
        <button className="panel-btn panel-btn-primary panel-btn-sm"
          style={{ marginLeft: "auto" }} onClick={load} disabled={loading}>
          {loading ? "Loading…" : "↻ Refresh"}
        </button>
      </div>
      <div className="panel-body">
        {loading && <div className="panel-loading">Loading…</div>}
        {error   && <div className="panel-error">{error}</div>}
        {!loading && !error && items.length === 0 && (
          <div className="panel-empty">No items yet.</div>
        )}
        {items.map(item => (
          <div key={item.id} className="panel-card">{item.name}</div>
        ))}
      </div>
    </div>
  );
}