"use client";
import {
  Button,
  Card,
  CardBody,
  CardFooter,
  Image,
  Tab,
  Tabs,
} from "@heroui/react";
import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation, Pagination } from "swiper/modules";
import { topNewsMediahub } from "@/services/medol-news-update";
import Link from "next/link";
import {
  getImageInp,
  inpLogin,
  topNewsInp,
  topNewsTbn,
} from "@/services/third-party-service";
import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
import PolriTvWidget from "../ui/social-media/polri-tv";
import { useTranslations } from "next-intl";
import TwitterWidget from "../ui/social-media/twitter";
import InstagramWidget from "../ui/social-media/instagram";
import YoutubeWidget from "../ui/social-media/youtube";
import FacebookWidgetNew from "../ui/social-media/facebook-new";
import TiktokWidget from "../ui/social-media/tiktok";

export default function SocialMediaNew() {
  const [selectedTab, setSelectedTab] = useState<any>("fb");
  const [mediahubUpdate, setMediahubUpdate] = useState<any>([]);
  const [tbnUpdate, setTbnUpdate] = useState([]);
  const [inpUpdate, setInpUpdate] = useState([]);

  // const t = useTranslations("Landing");
  return (
    <div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
      <div className="text-xl font-semibold w-full">
        <p className="border-b-2 border-red-600 w-fit mx-auto">
          Media Sosial Humas
        </p>
      </div>
      <div className=" p-1 md:p-5 space-y-5">
        <Tabs
          classNames={{
            tabList: "bg-white shadow-lg border p-2 rounded-lg",
            tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
            tabContent: [
              "group-data-[selected=true]:text-[white] text-[#bb3523]",
              "group-data-[selected=true]:bg-[#bb3523] bg-white rounded-md px-4 py-2",
            ],
          }}
          aria-label="Options"
          // color="[#bb3523]"
          className="flex justify-center"
          selectedKey={selectedTab}
          onSelectionChange={setSelectedTab}
        >
          <Tab key="fb" title="Facebook">
            <FacebookWidgetNew />
          </Tab>
          <Tab key="x" title="X">
            <TwitterWidget />
          </Tab>
          <Tab key="ig" title="Instagram">
            <InstagramWidget />
          </Tab>
          <Tab key="yt" title="Youtube">
            <YoutubeWidget />
          </Tab>

          <Tab key="tiktok" title="Tiktok">
            <TiktokWidget />
          </Tab>
        </Tabs>
      </div>
    </div>
  );
}