'use client'

import { useState } from "react"

export default function MyProfilePop(){
    const [blink, setBlink] = useState(false);
    return(
        <div className="modal-popup">
            <div className="modal-dialog ">
                <div className="modal-content">
                    <div className="modal-header">
                        <h1 className="title">My profile </h1>
                        <button className="modal-close">닫기</button>
                    </div>
                    <div className="modal-body">
                        <div className="modal-body-inner">
                            <div className="common-table">
                                <table>
                                    <colgroup>
                                        <col style={{width: '170px'}}/>
                                        <col />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <th>ユーザーID</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='nakazawaESS' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>担当者名ふりがな</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='セキヤミツヒロ' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>担当者名</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='関谷充弘' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>パスワード</th>
                                            <td>
                                                <div className="form-flex-wrap">
                                                    <div className="password-input mr10">
                                                        <input type={`${blink ? 'text':'password'}`} />
                                                        <button className={`blink ${blink ? 'on':''}`} onClick={() => setBlink(!blink)}></button>
                                                    </div>
                                                    <span className="mr10">※半角10文字以内</span>
                                                    <button className="btn-origin grey mr5">パスワード変更</button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>変更パスワードの入力 <span className="red">*</span></th>
                                            <td>
                                                <div className="form-flex-wrap">
                                                    <div className="input-wrap mr10" style={{flex: 1}}>
                                                        <input type="password" className="input-light" />
                                                    </div>
                                                    <button className="btn-origin grey mr5">変更</button>
                                                    <button className="btn-origin white ">変更しない</button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>部署名</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='エコ事業部' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>電話番号</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='07-0000-0000' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>FAX番号</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='07-0000-0000' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>メールアドレス</th>
                                            <td>
                                                <div className="input-wrap">
                                                    <input type="text" className="input-light" defaultValue='test.test@nakazawa-kenpan.co.jp' readOnly/>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div className="footer-btn-wrap">
                            <button className="btn-origin navy ">確認</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}