Simple form with shadcn styling

'use client'

/* ------------------ Update the import paths to match your project setup. ------------------*/
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle
} from '@/components/ui/card'
import { type ForgetPasswordProps, ForgetPasswordForm } from '@/components/auth/forget-password-form'
import { forgetPasswordAction } from '@/server/forget-password-action'

import Logo from '@/public/logo.svg'
/* -------------------------------------------------------------------------------------------*/
import Image from 'next/image'
import Link from 'next/link'
import { forwardRef } from 'react'

const ForgetPasswordPage = forwardRef<HTMLDivElement, { searchParams: { email?: string } }>(
  ({ searchParams }, ref) => {
    const { email } = searchParams
    const props: ForgetPasswordProps = {
      email,
      emailStrategy: 'magic-link',
      serverAction: forgetPasswordAction // Implement your custom backend logic in a server action
    }

    return (
      <Card
        ref={ref}
        className='w-full max-w-96 select-none border-0 shadow-none sm:border sm:border-border sm:shadow'
      >
        <CardHeader className='items-center px-1 sm:px-6'>
          <Image src={Logo} alt='Auth Logo' sizes='100px' className='mb-2 w-10' />
          <CardTitle className='w-full overflow-hidden text-ellipsis whitespace-nowrap text-center'>
            Recover your password
          </CardTitle>
          <CardDescription className='hyphens-auto text-balance break-words text-center'>
            Enter email address to verify your identity.
          </CardDescription>
        </CardHeader>

        <CardContent className='px-1 sm:px-6'>
          <ForgetPasswordForm {...props} />
        </CardContent>

        <CardFooter className='justify-center px-1 text-sm text-muted-foreground sm:px-6'>
          Back to&nbsp;
          <Link
            href='#' // sign in router path like: '/app/auth/sign-in'
            title='Link to sign in'
            className='text-foreground hover:underline hover:underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background'
          >
            Sign in
          </Link>
        </CardFooter>
      </Card>
    )
  }
)
ForgetPasswordPage.displayName = 'ForgetPasswordPage'
export default ForgetPasswordPage