'use client';
import { Layout } from '@/src/components/common/Layout';
import { AuthLayoutProps } from '@/src/types/auth';
import Link from 'next/link';

export function AuthLayout({ title, children, footerText, linkText, linkHref }: AuthLayoutProps) {
  return (
    <Layout>
      <div className='z-50 flex flex-col items-center gap-5 h-full w-full'>
        <div className='w-full h-full flex flex-col items-center justify-center'>
          <h1 className='text-neutral-800 text-2xl lg:text-4xl text-center font-bold mb-3'>{title}</h1>
          <div className='p-5 lg:p-6 border-2 border-neutral-900 rounded-xl bg-neutral-900 items-center justify-center flex flex-col'>
            {children}
            {footerText && (
              <p className='text-white mt-6'>{footerText}</p>
            )}
            {linkText && linkHref && (
              <Link href={linkHref} className='text-neutral-300 font-bold hover:underline'>
                {linkText}
              </Link>
            )}
          </div>
        </div>
      </div>
    </Layout>
  );
}
