---
import MoviesSearchInput from "../../components/MoviesSearchInput";
import CardMoviesList from "../../components/lists/movies/CardMoviesList";
import HomeLayout from "../../layouts/HomeLayout.astro";
import type { MovieDetail } from "../../types";

const jwt = Astro.cookies.get("jwt")?.value as string;

const url = new URL(Astro.request.url);
const query = url.searchParams.get("query");
const limit = url.searchParams.get("limit") ?? "18";

const queryParams = new URLSearchParams({
    limit: limit,
});

if (query) {
    queryParams.append("query", query);
}

const res = await fetch(
    `${import.meta.env.API_URL}/movies?${queryParams.toString()}`,
    {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${jwt}`,
        },
    },
);

const resBody = (await res.json()) as { movies: MovieDetail[] };
---

<HomeLayout title="Movies">
    <div class="row">
        <div class="col">
            <MoviesSearchInput searchUrl="/home" client:load />
        </div>
    </div>
    <div class="row">
        <div class="col">
            <CardMoviesList movies={resBody?.movies || []} />
        </div>
    </div>
</HomeLayout>