"use client";
import { RootState } from "@/store/store";
import { useTranslations } from "next-intl";
import { useSelector } from "react-redux";

type Props = {};

export default function StaticPagesFooter({}: Props) {
  const setting = useSelector(
    (state: RootState) => state.SettingsConfig.allSettings,
  );
  const t = useTranslations("");
  return (
    <div className="mt-12 rounded-2xl shadow-md shadow-black/10  p-6 md:p-8 bg-gradient-to-br from-primary/10 to-secondary/10 border-2 border-primary/20">
      <h3 className="text-lg text-primary mb-4">{t("Text.have_questions")}</h3>
      <p className="text-text-secondary mb-4">
        {t("Text.if_you_have_any_questions")}
      </p>
      <div className="flex flex-col sm:flex-row gap-4 text-sm">
        <a
          href={`mailto:${setting?.email}`}
          className="text-primary hover:underline"
        >
          {setting?.email}
        </a>
        <span className="hidden sm:inline text-text-secondary">|</span>
        <a
          href={`tel:${setting?.phone}`}
          className="text-primary hover:underline"
          dir="ltr"
        >
          {setting?.phone}
        </a>
      </div>
    </div>
  );
}