import { Paper } from "@mui/material";
import { countryStore } from "@shared";
import { observer } from "mobx-react-lite";
import { ArrowLeft } from "lucide-react";
import { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";

export const CountryPreviewPage = observer(() => {
  const { id } = useParams();
  const { getCountry, country } = countryStore;
  const navigate = useNavigate();

  useEffect(() => {
    (async () => {
      await getCountry(id as string);
    })();
  }, [id]);

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
      <div className="flex justify-between items-center">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
        {/* <div className="flex gap-2">
          <Button
            variant="contained"
            color="primary"
            onClick={() => navigate(`/user/${id}/edit`)}
            startIcon={<Pencil size={20} />}
          >
            Редактировать
          </Button>
          <Button
            variant="contained"
            color="error"
            onClick={() => navigate(`/user/${id}/delete`)}
            startIcon={<Trash2 size={20} />}
          >
            Удалить
          </Button>
        </div> */}
      </div>
      {country && (
        <div className="flex flex-col gap-10 w-full">
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Название</h1>
            <p>{country?.name}</p>
          </div>
        </div>
      )}
    </Paper>
  );
});