"use client";
import React from "react";
import { useQuery } from "@tanstack/react-query";
import { getFeedback } from "@/shared/api/feedbackSvc";
import Link from "next/link";
import Loader from "@/shared/ui/loader";
import { useTranslations } from "next-intl";

const ContactSection = () => {
  const t = useTranslations("");
  const { data: feedback, isLoading: feedbackIsLoading } = useQuery({
    queryKey: ["getFeedback"],
    queryFn: getFeedback,
  });
  return (
    <div className={"profile-section-wrapper"}>
      <h1 className={"profile-section-title"}>{t("Bog'lanish")}</h1>
      <span className={"profile-section-subtitle"}>
        {t(
          "Biz bilan bog'lanish uchun quyidagi usullardan foydalanishingiz mumkin"
        )}
      </span>
      <div>
        {feedbackIsLoading ? (
          <Loader height={"h-[30vh]"} />
        ) : (
          <div className={"grid grid-cols-2 items-center justify-between my-4"}>
            <div className={"flex flex-col"}>
              <span className={"text-lg font-bold"}>{t("Call Center")}</span>
              <Link
                className={"w-fit text-primary"}
                href={`tel:${feedback?.data.phone}`}
              >
                {feedback?.data.phone}
              </Link>
            </div>
            <div className={"flex flex-col"}>
              <span className={"text-lg font-bold"}>Telegram</span>
              <Link
                className={"w-fit text-primary"}
                href={feedback?.data.telegram_support || ""}
              >
                {feedback?.data.telegram_support}
              </Link>
            </div>
          </div>
        )}
        {/*<div className={"space-x-4"}>*/}
        {/*  <Button className={""} size={"lg"}><InstagramIcon/> @Instagram</Button>*/}
        {/*  <Button className={""} size={"lg"}><YoutubeIcon/> @Instagram</Button>*/}
        {/*  <Button className={""} size={"lg"}><InstagramIcon/> @Instagram</Button>*/}
        {/*  <Button className={""} size={"lg"}><YoutubeIcon/> @Instagram</Button>*/}
        {/*</div>*/}
      </div>
    </div>
  );
};
export default ContactSection;
