import { useEffect } from "react";
import { useSearchParams } from "react-router";
import { toast } from "sonner";

import type { Route } from "./+types/home";
import { Welcome } from "../welcome/welcome";
import { expressValueContext } from "~/contexts/express";

export function meta() {
  return [
    { title: "Brackt - Fantasy Sports Brackets" },
    {
      name: "description",
      content: "Create and manage your fantasy sports leagues",
    },
  ];
}

export async function loader({ context }: Route.LoaderArgs) {
  return {
    message: context.get(expressValueContext) || "No message from Express",
  };
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const [searchParams, setSearchParams] = useSearchParams();

  useEffect(() => {
    if (searchParams.get("deleted") === "true") {
      toast.success("League deleted successfully");
      // Remove the query parameter
      setSearchParams({});
    }
  }, [searchParams, setSearchParams]);

  return <Welcome message={loaderData.message} />;
}