import { useState } from 'react'

function NewPass() {
  const [showPassword, setShowPassord] = useState(false)
  const [showPassword_new, setShowPassord_new] = useState(false)
  // const [pageName, setPageName] = useState('login')
  return (
    <div className="login_text new_pass">
      <p>انشاء كلمه مرور جديده</p>
      <p>“أدخل كلمة مرور جديدة قوية لحسابك”</p>

      <form>
        <div className="password">
          <div>
            <i className="fa-solid fa-lock"></i>
            <input placeholder="كلمه المرور الجديده" />
          </div>
          {showPassword ? (
            <i
              className="fa-solid fa-eye-slash"
              onClick={() => setShowPassord(!showPassword)}
            ></i>
          ) : (
            <i
              className="fa-solid fa-eye"
              onClick={() => setShowPassord(!showPassword)}
            ></i>
          )}
        </div>
        <div className="password">
          <div>
            <i className="fa-solid fa-lock"></i>
            <input placeholder="تاكيد كلمه المرور الجديده" />
          </div>
          {showPassword_new ? (
            <i
              className="fa-solid fa-eye-slash"
              onClick={() => setShowPassord_new(!showPassword_new)}
            ></i>
          ) : (
            <i
              className="fa-solid fa-eye"
              onClick={() => setShowPassord_new(!showPassword_new)}
            ></i>
          )}
        </div>

        <div className="log_button">
          <button type="submit">حفظ كلمه المرور</button>
        </div>
      </form>
    </div>
  )
}
export default NewPass
