'use client'

import React from 'react'
import { Link } from '../common/Link'

export interface AuthLayoutProps {
  children: React.ReactNode
  title?: string
  subtitle?: string
}

export const AuthLayout = ({ children, title, subtitle }: AuthLayoutProps) => {
  return (
    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
      {/* Simple header with logo */}
      <header className="py-6">
        <div className="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
          <Link href="/" variant="neutral" className="no-underline">
            <h1 className="text-2xl font-bold text-primary-600 dark:text-primary-400 text-center">
              MoreThanADiagnosis
            </h1>
          </Link>
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="w-full max-w-md space-y-8">
          {/* Title and subtitle */}
          {(title || subtitle) && (
            <div className="text-center">
              {title && (
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
                  {title}
                </h2>
              )}
              {subtitle && (
                <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                  {subtitle}
                </p>
              )}
            </div>
          )}

          {/* Form container */}
          <div className="bg-white dark:bg-gray-800 py-8 px-6 shadow-lg rounded-lg">
            {children}
          </div>
        </div>
      </main>

      {/* Simple footer */}
      <footer className="py-6">
        <div className="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-center text-sm text-gray-600 dark:text-gray-400">
            &copy; {new Date().getFullYear()} MoreThanADiagnosis. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  )
}