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

import type { Route } from "./+types/home";
import { Welcome } from "../welcome/welcome";

export function meta({}: Route.MetaArgs) {
  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.VALUE_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} />;
}