import { Suspense } from 'react';
import { headers } from 'next/headers';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';
import { getMetadataForRequest, getRequestMetadataInput } from '@/lib/siteSeo';
import ResetPasswordClient from './ResetPasswordClient';

export async function generateMetadata() {
  return getMetadataForRequest(
    getRequestMetadataInput(await headers(), {
      pathname: '/reset-password',
      lookupKeyOverrides: ['reset-password'],
    })
  );
}

export default function ResetPassword() {
  return (
    <>
      <CVHeader />
      <Suspense
        fallback={(
          <div className="flex items-center justify-center px-4 py-12" style={{ backgroundColor: '#FAF5F0' }}>
            <div className="text-sm font-semibold" style={{ color: '#6B5D52' }}>Loading reset form...</div>
          </div>
        )}
      >
        <ResetPasswordClient />
      </Suspense>
      <CVFooter />
    </>
  );
}