'use client'
import { useState } from "react";

export default function PwChangeForm(){
  const [pwShow01, setPwShow01] = useState(false); //비밀번호 확인 보이기 숨기기
  const [pwShow02, setPwShow02] = useState(false); //비밀번호 재확인 보이기 숨기기
  
  return(
    <div className="border-frame">
      <div className="data-form-wrap">
        <div className="data-input-form-bx">
          <div className="data-input-form-tit">新規パスワード再入力 <i className="import">*</i></div>
          <div className="data-input">
            <div className="login-input pw change">
              <input type={`${pwShow01 ? 'text': 'password'}`} className="login-frame" placeholder="●●●●"/>
              <button className={`login-icon ${pwShow01 ? 'act' : ''}`} onClick={() => setPwShow01(!pwShow01)}><i className="show-icon"></i></button>
            </div>
          </div>
          <div className="data-input-guide">10文字以内</div>
        </div>
        <div className="data-input-form-bx">
          <div className="data-input-form-tit">新規パスワード入力  <i className="import">*</i></div>
          <div className="data-input">
            <div className="login-input pw change">
              <input type={`${pwShow02 ? 'text': 'password'}`} className="login-frame" placeholder="●●●●"/>
              <button className={`login-icon ${pwShow02 ? 'act' : ''}`} onClick={() => setPwShow02(!pwShow02)}><i className="show-icon"></i></button>
            </div>
          </div>
          <div className="data-input-guide">10文字以内</div>
        </div>
      </div>
      <div className="btn-flex-wrap">
        <div className="btn-bx">
          <button className="btn-frame n-blue icon">戻る<i className="btn-arr"></i></button>
        </div>
        <div className="btn-bx">
          <button className="btn-frame red icon">リセットする<i className="btn-arr"></i></button>
        </div>
      </div>
    </div>
  )
}