import { useAtom } from "jotai";
import { bgFocusAtom } from "../lib/state/background";
import BackgroundContainer from "./backgroundContainer";
import useDarkMode from "lib/darkModeHook";

export default function Background() {
    const [isFocus, setFocus] = useAtom(bgFocusAtom);
    
    const darkMode = useDarkMode();

    return (
        <div>
            {darkMode ? (
                <BackgroundContainer src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} darkMode={darkMode}/>
            ) : (
                <BackgroundContainer src="white" isFocus={isFocus} onClick={() => setFocus(false)} darkMode={darkMode}/>
            )}
        </div>
    );
}