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

const ArticleCreatePage: React.FC = () => {
  const navigate = useNavigate();

  useEffect(() => {
    selectedCityStore.setIsLocked(true);
    return () => selectedCityStore.setIsLocked(false);
  }, []);

  const { articleData } = articlesStore;

  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 ArticleCreatePage;
