"use client";

import { LayoutWithSidebar } from "@/components/page/LayoutWithSidebar";
import { baseAPI } from "@/lib/API";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";

const Visitors = () => {
  const [visitorsData, setVisitorsData] = useState<string>();
  const locale = useLocale();
  const t = useTranslations("visitors");

  const fetchVisitors = async () => {
    try {
      const res = await fetch(`${baseAPI}settings/visitors_page`, {
        headers: {
          "Accept-Language": locale,
        },
      });

      if (!res.ok) {
        throw new Error("Error");
      }

      const data = await res.json();

      setVisitorsData(data);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchVisitors();
  }, [locale]);

  return (
    <div>
      <LayoutWithSidebar
        title={t("information")}
        second={t("title")}
      >
        <div
          dangerouslySetInnerHTML={{ __html: visitorsData ? visitorsData : "" }}
          className="flex flex-col gap-1 select-inner"
        />
      </LayoutWithSidebar>
    </div>
  );
};

export default Visitors;