import { FC } from "react";
import { PageHeader } from "./PageHeader";
import { PageFooter } from "./PageFooter";
import { NextIntlClientProvider, useMessages } from "next-intl";

export interface MainProps {
    children: React.ReactNode;
}

export const Main:FC<MainProps> = ({ children }) => {

    const message = useMessages();

    return(
        <NextIntlClientProvider messages={message}>
            <main className="flex min-h-screen flex-col bg-base-300">
                <PageHeader />
                <div className="sm:mx-auto px-4">
                    {children}
                </div>
                <PageFooter />
            </main>
        </NextIntlClientProvider>
    );
}