"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Title from "@/components/titlePage";
import { useSelector } from "react-redux";
import Image from "next/image";
import AlertComponent from "@/components/alert";
import { Skeleton } from "antd";
import axios from "@/utils/axios-config";
import { useTranslations } from "next-intl";
import { store } from "@/store/store";

interface AboutData {
  about_us?: string;
  facebook?: string;
  twitter?: string;
  instagram?: string;
  linkedin?: string;
  youtube:string;
  snapchat:string;
}



export default function About() {
  const language = "ar";
  const [data, setData] = useState<AboutData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const t = useTranslations("About");
  const { idToken } = useSelector((state: { Auth: any }) => state.Auth);

  useEffect(() => {
    const fetchAboutData = async () => {
      try {
        const response = await axios.get(`/settings/about_us`);

        const data = await response?.data?.data;

        setData(data);
      } catch (err: any) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchAboutData();
  }, []);

  const { about_us, facebook, twitter, instagram, linkedin,youtube,snapchat } = data || {};

  return (
    <section className=" ">
      <section className="bg-[#D2F9F4] min-h-[250px] flex  justify-center items-center">
        <div className="container mx-auto px-4 flex justify-center items-center h-full">
          <h2 className="text-[#184363] font-[700] text-center text-[25px] min-[400px]:text-[25px] sm:text-[35px] md:text-[38px] lg:text-[42px] xl:text-[45px] capitalize sm:leading-[50px] lg:leading-[68px]">
            {t("about-title")}
            <br />
            {t("about-title2")}
          </h2>{" "}
        </div>
      </section>
        {/* {idToken && ( */}
          <div className="flex items-center justify-center py-2 bg-[#D2F9F4]">
            {/* <div
              className="relative m-2 ms-0 p-3 bg-primary rounded-[10px] cursor-pointer hover:bg-opacity-70"
              title="Facebook"
            >
              <a href={facebook} target="_blank" rel="noopener noreferrer" className="absolute w-full h-full top-0 left-0"/>
              <Image
                src={"/images/links/face.svg"}
                alt="Facebook"
                title="Facebook"
                width={13}
                height={13}
                className="h-[13px] w-[13px]"
                style={{ objectFit: "contain" }}
                priority
              />
            </div> */}
            <div
              className="relative m-2 ms-0 p-3 bg-primary rounded-[10px] cursor-pointer hover:bg-opacity-70"
              title="Instagram"
            >
              <a href={instagram} target="_blank" rel="noopener noreferrer" className="absolute w-full h-full top-0 left-0"/>
              <Image
                src={"/images/links/insta.svg"}
                alt="Instagram"
                title="Instagram"
                width={13}
                height={13}
                className="h-[13px] w-[13px]"
                style={{ objectFit: "contain" }}
                priority
              />
            </div>
            <div
              className="relative m-2 ms-0 p-3 bg-primary rounded-[10px] cursor-pointer hover:bg-opacity-70"
              title="snapchat"
            >
              <a href={snapchat} target="_blank" rel="noopener noreferrer" className="absolute w-full h-full top-0 left-0"/>
              <Image
                src={"/images/links/snap.svg"}
                alt="snapchat"
                title="snapchat"
                width={25}
                height={13}
                className="h-[13px] w-[13px]"
                style={{ objectFit: "contain" }}
                priority
              />
            </div>
            <div
              className="relative m-2 ms-0 p-3 bg-primary rounded-[10px] cursor-pointer hover:bg-opacity-70"
              title="Twitter"
            >
              <a href={twitter} target="_blank" rel="noopener noreferrer" className="absolute w-full h-full top-0 left-0"/>
              <Image
                src={"/images/links/twitter.svg"}
                alt="Twitter"
                title="Twitter"
                width={13}
                height={13}
                className="h-[13px] w-[13px]"
                style={{ objectFit: "contain" }}
                priority
              />
            </div>
            <div
              className="relative m-2 ms-0 p-3 bg-primary rounded-[10px] cursor-pointer hover:bg-opacity-70"
              title="Tiktok"
            >
              <a href={youtube} target="_blank" rel="noopener noreferrer" className="absolute w-full h-full top-0 left-0"/>
              <Image
                src={"/images/links/tiktok.svg"}
                alt="tiktok"
                title="Tiktok"
                width={25}
                height={13}
                className="h-[13px] w-[13px]"
                style={{ objectFit: "contain" }}
                priority
              />
            </div>
            {/* <div
              className="relative m-2 ms-0 p-3 bg-primary rounded-[10px] cursor-pointer hover:bg-opacity-70"
              title="Linkedin"
            >
              <a href={linkedin} target="_blank" rel="noopener noreferrer" className="absolute w-full h-full top-0 left-0"/>
              <Image
                src={"/images/links/linkedin.svg"}
                alt="Linkedin"
                title="Linkedin"
                width={25}
                height={13}
                className="h-[13px] w-[13px]"
                style={{ objectFit: "contain" }}
                priority
              />
            </div> */}
          </div>
        {/* )} */}
      <div className="container mx-auto px-2 pt-[100px]">
        <Title title="about-title" main="About" />

        {error ? (
          <AlertComponent
            message="about-error"
            desc="about-error-desc"
            main="About"
          />
        ) : loading ? (
          <div className="space-y-4">
            <Skeleton active paragraph={{ rows: 4 }} />
            <div className="flex space-x-4 mt-6">
              <Skeleton.Button active size="small" shape="default" />
              <Skeleton.Button active size="small" shape="default" />
              <Skeleton.Button active size="small" shape="default" />
              <Skeleton.Button active size="small" shape="default" />
            </div>
          </div>
        ) : (
          <>
            {/* <p className="text-[#000000] text-[16px] sm:text-[20px] font-[400] leading-[1.6] tracking-[0.7px]">
              {about_us || "Content is currently unavailable."}
            </p> */}
            <div
              dangerouslySetInnerHTML={{
                __html: about_us || t("content-unavailable"),
              }}
            />

            {/* <div className="social-links flex space-x-4 mt-6">
              {facebook && (
                <Link
                  href={facebook}
                  locale={false}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#184363] hover:underline"
                >
                  Facebook
                </Link>
              )}
              {twitter && (
                <Link
                  href={twitter}
                  locale={false}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#184363] hover:underline"
                >
                  Twitter
                </Link>
              )}
              {instagram && (
                <Link
                  href={instagram}
                  locale={false}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#184363] hover:underline"
                >
                  Instagram
                </Link>
              )}
              {linkedin && (
                <Link
                  href={linkedin}
                  locale={false}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#184363] hover:underline"
                >
                  LinkedIn
                </Link>
              )}
            </div> */}
          </>
        )}
      </div>
    </section>
  );
}