Password Reset Form

"use client"

import { PasswordResetForm } from "@/components/ui/password-reset-form"
import { useState } from "react"

export default function PasswordResetFormDemo() {
  const [successMessage, setSuccessMessage] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (password: string) => {
    setIsLoading(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsLoading(false)
    setSuccessMessage("Password reset successfully!")
    setTimeout(() => setSuccessMessage(""), 4000)
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-background via-background to-muted/20 flex items-center justify-center p-4">
      <div className="w-full max-w-lg">
        {successMessage && (
          <div className="mb-6 p-4 rounded-lg bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 text-center font-medium animate-in fade-in slide-in-from-top-4 duration-500">
            {successMessage}
          </div>
        )}

        <div className="bg-card border border-border rounded-2xl p-8 sm:p-12 shadow-lg backdrop-blur-sm animate-in fade-in slide-in-from-bottom-8 duration-700">
          <PasswordResetForm
            logoUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-NvuimEhy9T471ZGl9H3KIhaiwgsfcq.png&w=1000&q=75"
            title="Create new password"
            description="Enter a new password below to change your password."
            onSubmit={handleSubmit}
            isLoading={isLoading}
            onSuccess={() => {
              setSuccessMessage("Password updated successfully!")
              setTimeout(() => setSuccessMessage(""), 4000)
            }}
          />
        </div>

        <div className="mt-8 text-center">
          <button className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-200">
            Need help? Contact support
          </button>
        </div>
      </div>
    </div>
  )
}