"use client";

import { useArticle } from "@/lib/api/dashboard/articles-api";
import { BlogPreviewView } from "./blog-preview-view";
import { useTranslations } from "next-intl";

interface BlogPreviewContainerProps {
  id: string;
}

export function BlogPreviewContainer({ id }: BlogPreviewContainerProps) {
  const { article, isLoading } = useArticle(id);
  const t = useTranslations("dashboard.blogs.preview");

  if (isLoading) {
    return (
      <div className="animate-pulse rounded-2xl border border-border bg-card">
        <div className="h-64 rounded-t-2xl bg-muted" />
        <div className="space-y-4 p-8">
          <div className="h-6 w-2/3 rounded-lg bg-muted" />
          <div className="h-4 w-full rounded-lg bg-muted" />
          <div className="h-4 w-5/6 rounded-lg bg-muted" />
          <div className="h-4 w-4/6 rounded-lg bg-muted" />
        </div>
      </div>
    );
  }

  if (!article) {
    return (
      <div className="rounded-2xl border border-border bg-card p-10 text-center text-sm text-muted-foreground">
        {t("notFound")}
      </div>
    );
  }

  return <BlogPreviewView article={article} />;
}