import { useCallback, useState } from "preact/hooks";

export function Recommendations({ id, type }: { id: string; type: string }) {
  const [state, setState] = useState<"disabled" | "loading">(
    "disabled",
  );
  const [results, setResults] = useState();

  const startFetch = useCallback(
    async () => {
      if (state === "loading") return;
      setState("loading");
      const res = await fetch(`/api/recommendation/${type}/${id}`);
      const json = await res.json();
      setResults(json);
    },
    [id, type],
  );

  if (results) {
    return (
      <ul class="gap-5">
        {results.map((res) => {
          return (
            <div class="flex gap-5 items-center mb-4">
              <img
                class="w-12 h-12 rounded-full object-cover"
                src={`https://image.tmdb.org/t/p/original${res.poster_path}`}
              />
              <p>{res.title}</p>
            </div>
          );
        })}
      </ul>
    );
  }

  if (state === "loading") {
    return <p>Loading...</p>;
  }

  return <button onClick={startFetch}>load recommendations</button>;
}