import { useTranslation } from "react-i18next";
import { FiBookmark } from "react-icons/fi";
import Post from "@/components/social/posts/Post";
import EmptyState from "@/components/ui/EmptyState";
import Spinner from "@/components/ui/Spinner";
import { useQuery } from "@tanstack/react-query";
import { privateApi } from "@/api/privateClient";

export default function SavedPage() {
  const { t } = useTranslation("social");

  const { data, isLoading } = useQuery({
    queryKey: ["social", "posts", "saved"],
    queryFn: () =>
      privateApi.get("/api/social/posts/saved/").then((r) => r.data),
  });

  const posts = data?.results ?? [];

  return (
    <div>
      <header className="sticky top-0 z-10 border-b border-brand-lines/10 bg-brand-bg/80 px-4 py-3 backdrop-blur">
        <h1 className="text-lg font-bold text-brand-text">{t("nav.saved")}</h1>
      </header>

      {isLoading && (
        <div className="flex justify-center py-10">
          <Spinner size={28} />
        </div>
      )}

      {!isLoading && posts.length === 0 && (
        <EmptyState icon={<FiBookmark />} message={t("saved.empty", { defaultValue: "Žádné uložené příspěvky." })} />
      )}

      <div>
        {posts.map((p: any) => (
          <Post key={p.id} post={p} />
        ))}
      </div>
    </div>
  );
}
