"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import PopUpList from "../popup/component/table";
import PopUpListTable from "../popup/component/popup-table";
import IklanList from "./component/table";
import IklanListTable from "./component/popup-table";

export default function AdminIklan() {
  const [selectedTab, setSelectedTab] = useState("content");

  return (
    <div>
      <SiteBreadcrumb />
      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
        <div className="flex justify-between">
          {selectedTab === "content" ? "List Media" : " List Pop Up"}

          <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
            <Button
              rounded="md"
              onClick={() => setSelectedTab("content")}
              className={` hover:text-white
                ${
                  selectedTab === "content"
                    ? "bg-black text-white "
                    : "bg-white text-black "
                }`}
            >
              Kontent
            </Button>
            <Button
              rounded="md"
              onClick={() => setSelectedTab("iklan")}
              className={` hover:text-white
                ${
                  selectedTab === "iklan"
                    ? "bg-black text-white "
                    : "bg-white text-black "
                }`}
            >
              Iklan
            </Button>
          </div>
        </div>

        {selectedTab === "content" ? <IklanList /> : <IklanListTable />}
      </div>
    </div>
  );
}
