import { Head, Link } from '@inertiajs/react';
import { useMemo } from 'react';

interface AppLayoutProps {
    children: React.ReactNode;
    header?: JSX.Element;
    footer?: JSX.Element;
}

export default function AppLayout({
    children,
    header,
    footer,
}: AppLayoutProps) {
    return (
        <>
            <Head>
                <title>SolarWise Energy</title>
                <meta name="description" content="Solar savings calculator and recommendation platform for Australian homeowners" />
                {/* Add other meta tags as needed */}
            </Head>

            <div className="min-h-screen bg-gray-50">
                {/* Header */}
                <header className="bg-white shadow-sm">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="flex justify-between h-16">
                            <div className="flex">
                                <div className="flex-shrink-0 flex items-center">
                                    <Link href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
                                        <span className="self-center text-xl font-semibold text-gray-900">SolarWise Energy</span>
                                    </Link>
                                </div>
                                <div className="hidden md:flex md:items-center md:space-x-6">
                                    {/* Navigation links will go here */}
                                    <Link href="/" className="text-gray-500 hover:text-gray-700">Home</Link>
                                    <Link href="/how-it-works" className="text-gray-500 hover:text-gray-700">How It Works</Link>
                                    <Link href="/calculator" className="text-gray-500 hover:text-gray-700">Calculator</Link>
                                    <Link href="/solutions" className="text-gray-500 hover:text-gray-700">Solutions</Link>
                                </div>
                            </div>
                            <div className="flex items-center">
                                {/* Auth buttons will go here */}
                                <div className="ml-4">
                                    {/* Placeholder for auth */}
                                </div>
                            </div>
                        </div>
                    </div>
                </header>

                {/* Page Header */}
                {header && (
                    <header className="mb-8">
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            {header}
                        </div>
                    </header>
                )}

                {/* Page Body */}
                <main>
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                        {children}
                    </div>
                </main>

                {/* Footer */}
                {footer && (
                    <footer className="mt-12">
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            {footer}
                        </div>
                    </footer>
                )}

                {/* Default Footer */}
                {!footer && (
                    <footer className="mt-12 pt-10 border-t border-gray-200">
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-sm text-gray-500">
                            &copy; {new Date().getFullYear()} SolarWise Energy. All rights reserved.
                        </div>
                    </footer>
                )}
            </div>
        </>
    );
}