"use client";

import { Button, Flex, Heading, Text, Link } from "@radix-ui/themes";
import { Session } from "next-auth";
import { SessionProvider, signIn } from "next-auth/react";
import useThemePreference from "../hooks/useThemePreference";

export default function AuthWrapper({
  children,
  session,
}: {
  children: React.ReactNode,
  session: Session | null,
}) {
  const darkTheme = useThemePreference();

  if (session?.user) {
    return (
      <SessionProvider session={session}>
        {children}
      </SessionProvider>
    );
  } else {
    return (
      <>
        <Flex direction='column' gap='4' m="4" align='center'>
          <Heading size='8'>Unauthenticated</Heading>
          <Button variant="outline" size='3' onClick={() => signIn()}>Sign in</Button>
        </Flex>
        <Flex justify="end" className="fixed bottom-0 w-full">
          <Text className="opacity-50 p-4 pr-10" weight="light">
            Background image by
            <Link
              highContrast
              href={darkTheme
                ? "https://unsplash.com/photos/a-red-jelly-floating-in-the-dark-water-MBztcsAb9LU"
                : "https://unsplash.com/photos/silhouette-of-mountain-at-daytime-jUCQRQeRs3k"}
              >
                {" "}{darkTheme ? "Vadym" : "Willian Justen de Vasconcellos"} on Unsplash
              </Link>
          </Text>
        </Flex>
      </>
    );
  }
}