import { AmorishProvider, useAmorish } from "@amorish/widget";

function ReviewsWidget() {
  const { theme, user, request, emit, ready } = useAmorish();

  if (!ready) return <div>Loading…</div>;

  const loadProducts = async () => {
    const products = await request<unknown, Array<{ id: string; name: string }>>(
      "products.list",
    );
    console.log(products);
  };

  return (
    <div style={{ background: theme.colors.background, color: theme.colors.foreground }}>
      <p>Hi {user?.name ?? "guest"}</p>
      <button onClick={loadProducts}>Load products from host</button>
      <button onClick={() => emit("review.created", { rating: 5 })}>
        Submit review
      </button>
    </div>
  );
}

export default function App() {
  return (
    <AmorishProvider widgetVersion="1.0.0">
      <ReviewsWidget />
    </AmorishProvider>
  );
}