"use client";

import colors, { hexToRgb } from "@/utils/colors";
import { useTheme } from "next-themes";
import React, { ReactNode, useEffect, useState } from "react";
import Image from "next/image";

const Background = ({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) => {
  const { theme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <div
        className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse " + className}
      ></div>
    );
  }

  const backgroundColor = hexToRgb(colors[theme!]["neutral"]);

  return (
    <div
      className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col " + className}
    >
      <Image
        src="/images/gradient.webp"
        alt="background"
        layout="fill"
        objectFit="cover"
        objectPosition="center"
        priority
      />
      <div className="z-10">{children}</div>
    </div>
  );
};

export default Background;