import type { Metadata } from "next";
import { Outfit } from "next/font/google";
import "./globals.css";
import Header from "@/components/layouts/Header";
import Footer from "@/components/layouts/Footer";
import {ToastContainer} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import {createPaintingOrder} from "@/actions/actions";

const outfit = Outfit({
  variable: "--font-outfit",
  subsets: ["latin"],
})

export const metadata: Metadata = {
  title: "Painting Services",
  description: "Painting Services",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
    async function submit(formData: FormData) {
        'use server'
        return await createPaintingOrder(formData);
    }
  return (
    <html lang="en">
      <body
        className={`${outfit.variable} antialiased`}
      >
      <Header submit={submit}/>
        {children}
      <Footer/>
      <ToastContainer
          position="top-right"
          autoClose={2000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="colored"
      />
      </body>
    </html>
  );
}
