"use client";

import React from "react";
import { useAppSelector } from "../hooks/hooks";

const TextTranslate: React.FC<{ text?: string }> = ({ text }) => {
  let LanguageTextList: any = null;

  try {
    LanguageTextList = useAppSelector((state) => state.language);
  } catch (error) {
    // ✅ Happens when used outside Redux (like in toast)
    return <>{text || ""}</>;
  }

  if (!text || !LanguageTextList || !LanguageTextList.results) {
    return <>{text || ""}</>;
  }

  const trimmedText = text.trim();

  const translation = LanguageTextList.results.find((element: any) => {
    if (typeof element.key !== "string") return false;
    return element.key.trim().toLowerCase() === trimmedText.toLowerCase();
  });

  return <>{translation ? translation.Translation : text}</>;
};

export default TextTranslate;