import React, { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { LanguageSwitcher } from "@widgets";
import { articlesStore } from "@shared";
import { observer } from "mobx-react-lite";

const ArticleEditPage: React.FC = observer(() => {
  const navigate = useNavigate();
  const { id } = useParams();

  const { articleData, getArticle } = articlesStore;

  useEffect(() => {
    if (id) {
      // Fetch data for all languages
      getArticle(parseInt(id), "ru");
      getArticle(parseInt(id), "en");
      getArticle(parseInt(id), "zh");
    }
  }, [id]);

  return (
    <div className="flex flex-col gap-10 w-full items-end">
      <div className="flex gap-10 items-center mb-5 max-w-[80%]">
        <h1 className="text-3xl break-words">
          {articleData?.ru?.heading || "Редактирование статьи"}
        </h1>
      </div>
      <LanguageSwitcher />
      <div className="flex items-center gap-4">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
      </div>
    </div>
  );
});

export default ArticleEditPage;