'use client';
import IconMail from '@/components/icon/icon-mail';
import { useRouter } from 'next/navigation';
import React from 'react';

const ComponentsAuthResetPasswordForm = () => {
    const router = useRouter();

    const submitForm = (e: any) => {
        e.preventDefault();
        router.push('/');
    };

    return (
        <form onSubmit={submitForm} className="dark:text-white">

            <div className="space-y-4">

                {/* Email */}
                <div className="relative">
                    <label
                        htmlFor="Email"
                        className="block mb-1 text-sm text-gray-300"
                    >
                        Email
                    </label>

                    <input
                        id="Email"
                        type="email"
                        placeholder="Email Address"
                        className="w-full ps-10 py-3
                          bg-[rgba(7,13,30,0.7)]
                          border border-white/15 rounded-lg
                          text-white placeholder:text-gray-400
                          focus:outline-none focus:border-white/30"
                    />

                    <span className="absolute start-4 top-[42px] -translate-y-1/2 text-white">
                        <IconMail fill />
                    </span>
                </div>

                {/* Submit */}
                <button
                    type="submit"
                    className="w-full py-3 rounded-xl text-lg font-semibold text-white
                      bg-gradient-to-r from-blue-600 to-pink-500
                      shadow-lg transition-all hover:opacity-90 hover:scale-[1.02]"
                >
                    RECOVER
                </button>

            </div>
        </form>
    );
};

export default ComponentsAuthResetPasswordForm;
