import Link from 'next/link';
import type { Metadata } from 'next';
import { ROUTES } from '@/lib/routes';
import { SignInForm } from '@/components/auth/sign-in-form';

export const metadata: Metadata = { title: 'Sign In' };

export default function SignInPage({ searchParams }: { searchParams: { redirect?: string; reset?: string } }) {
  return (
    <section className="bg-beige py-16">
      <div className="container-page flex justify-center">
        <div className="card w-full max-w-md p-8">
          <h1 className="text-center font-serif text-2xl font-bold text-navy-800">Sign In</h1>
          <p className="mt-1 text-center text-xs text-navy-500">Sign in to your CeylonHandicrafts.lk account.</p>

          {searchParams?.reset === 'success' && (
            <div className="mt-4 rounded-md border border-green-200 bg-green-50 px-4 py-3 text-center text-sm text-green-700">
              Your password has been reset. Please sign in with your new password.
            </div>
          )}

          <SignInForm redirectTo={searchParams?.redirect} />

          <p className="mt-6 text-center text-sm text-navy-600">
            Don&apos;t have an account?{' '}
            <Link href={ROUTES.register} className="font-semibold text-gold-600 hover:text-gold-700">Register</Link>
          </p>
        </div>
      </div>
    </section>
  );
}