import type { Route } from "./+types/users.$id.edit";
import { useEffect, useState } from "react";
import { UserType } from "~/types/UserType";
import { showUser } from "~/utils/api/usersApi";
import Spinner from "~/components/Spinner";
import EditUserForm from "~/components/features/users/EditUserForm";
import { useParams } from "react-router";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Dish Planner - Edit User" },
    { name: "description", content: "Edit user details" },
  ];
}

const UpdateUsersPage = () => {
  const params = useParams();
  const id = Number(params.id);
  const [user, setUser] = useState<UserType | null>(null);

  useEffect(() => {
    showUser(id).then((user: UserType) => setUser(user));
  }, [id]);

  if (!user) {
    return <Spinner />;
  }

  return <EditUserForm user={user} />;
};

export default UpdateUsersPage;