'use client'

import { useState } from 'react'

export default function Login() {
  const [pwShow, setPwShow] = useState(false) //비밀번호 보이기 숨기기

  return (
    <>
      <div className="login-form-wrap">
        <div className="login-form mb15">
          <div className="login-input id">
            <input type="text" className="login-frame" placeholder="Input Frame ID" />
            <button className="login-icon">
              <i className="del-icon"></i>
            </button>
          </div>
        </div>
        <div className="login-form">
          <div className="login-input pw">
            <input type={`${pwShow ? 'text' : 'password'}`} className="login-frame" placeholder="Input Frame PW" />
            <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
              <i className="show-icon"></i>
            </button>
          </div>
        </div>
        <div className="login-check-warp">
          <div className="check-form-box">
            <input type="checkbox" id="ch01" />
            <label htmlFor="ch01">ID Save</label>
          </div>
          <div className="toggle-form">
            <label className="toggle-btn">
              <input type="checkbox" />
              <span className="slider"></span>
            </label>
            <div className="toggle-name">Q.PARTNERS</div>
          </div>
        </div>
        <div className="login-btn-wrap">
          <button className="btn-frame icon login">
            お問い合わせ <i className="btn-arr"></i>
          </button>
        </div>
      </div>
    </>
  )
}