"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import ListViewSocialMediaTable from "@/components/table/task-plan/list-view-social-media-table";
import SingleViewSocialMediaTable from "@/components/table/task-plan/single-view-social-media-table";
import { Button } from "@/components/ui/button";
import { useRouter } from "@/i18n/routing";
import { useState } from "react";

export default function TaskPlanSocialMediaMediaHub() {
  const router = useRouter();
  const [view, setView] = useState("single");
  return (
    <>
      <SiteBreadcrumb />
      <div className="flex flex-col gap-4">
        <div className="flex justify-between">
          <Button
            onClick={() =>
              view === "single" ? setView("list") : setView("single")
            }
          >
            {view == "single" ? "List" : "Single"} View
          </Button>
          <Button
            color="primary"
            onClick={() =>
              router.push("/curator/task-plan/medsos-mediahub/create-monthly")
            }
          >
            Buat Perencaan
          </Button>
        </div>
        {view == "single" ? (
          <SingleViewSocialMediaTable />
        ) : (
          <ListViewSocialMediaTable />
        )}
      </div>
    </>
  );
}