"use client";
import { AddIcon } from "@/components/icons";
import ArticleTable from "@/components/table/article-table";
import generatedArticleIds from "@/store/generated-article-store";
import { Button, Card } from "@nextui-org/react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function BasicPage() {
  const router = useRouter();
  const setGeneratedArticleIdStore = generatedArticleIds(
    (state) => state.setArticleIds
  );
  const goGenerate = () => {
    setGeneratedArticleIdStore({
      singleArticle: [],
      bulkArticle: [],
      rewriteArticle: [],
    });
    router.push("/admin/article/generate");
  };

  return (
    <div className="overflow-x-hidden overflow-y-scroll rounded-lg border-2">
      <div className="px-2 md:px-4 w-full">
        <div className="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
          <Link href="/admin/article/create">
            <Button size="md" color="primary" className="w-min">
              <AddIcon />
              New Article
            </Button>
          </Link>
          <Button
            size="md"
            color="primary"
            className="w-min"
            onPress={goGenerate}
          >
            <AddIcon />
            Generate Article
          </Button>
        </div>
        <div className="bg-white dark:bg-[#18181b] rounded-xl my-5 p-2">
          <ArticleTable />
        </div>
      </div>
    </div>
  );
}