import React from "react"
import './style.css'
import Icon from "../../../src/assets/images/Polygon.png"


export const AccountSettings = () => {
    return (
        <div className="account-settings">
            <h2>Account Settings</h2>
            <div className="tab">
               <div className="tab-menu">
                   <ul>
                       <li className="active">ACCOUNT INFO/PASSWORD</li>
                       <li>PRIVACY SETTINGS</li>
                       <li>ACTIVE SESSIONS</li>
                   </ul>
               </div>
                <div className="tab-content">
                    <div className="account-info">

                    </div>
                    <div className="privacy">
                        <p>
                            Please note: Opting Out here doesn’t mean you’ll be removed
                            from that Brand’s mailing list outside of Restless Nites
                            – just from communications inside our site. You’ll have
                            to contact them directly to break ties further.
                        </p>
                        <div className="pr-settings">
                            <div className="pr-settings-item">
                                <div className="item-name">
                                    <img src={Icon} alt="Icon"/>
                                    <span>Das Bunker</span>
                                </div>
                                <div className="item-box">
                                    <span>Opt In?</span>
                                    <label className="checkbox-block">
                                        <input type="checkbox" />
                                        <span className="checkmark" />
                                    </label>
                                </div>
                            </div>
                            <div className="pr-settings-item">
                                <div className="item-name">
                                    <img src={Icon} alt="Icon"/>
                                    <span>Das Bunker</span>
                                </div>
                                <div className="item-box">
                                    <span>Opt In?</span>
                                    <label className="checkbox-block">
                                        <input type="checkbox" />
                                        <span className="checkmark" />
                                    </label>
                                </div>
                            </div>
                            <div className="pr-settings-item">
                                <div className="item-name">
                                    <img src={Icon} alt="Icon"/>
                                    <span>Das Bunker</span>
                                </div>
                                <div className="item-box">
                                    <span>Opt In?</span>
                                    <label className="checkbox-block">
                                        <input type="checkbox" />
                                        <span className="checkmark" />
                                    </label>
                                </div>
                            </div>
                            <div className="pr-settings-item">
                                <div className="item-name">
                                    <img src={Icon} alt="Icon"/>
                                    <span>Das Bunker</span>
                                </div>
                                <div className="item-box">
                                    <span>Opt In?</span>
                                    <label className="checkbox-block">
                                        <input type="checkbox" />
                                        <span className="checkmark" />
                                    </label>
                                </div>
                            </div>
                            <div className="pr-settings-item">
                                <div className="item-name">
                                    <img src={Icon} alt="Icon"/>
                                    <span>Das Bunker</span>
                                </div>
                                <div className="item-box">
                                    <span>Opt In?</span>
                                    <label className="checkbox-block">
                                        <input type="checkbox" />
                                        <span className="checkmark" />
                                    </label>
                                </div>
                            </div>
                            <div className="pr-settings-item">
                                <div className="item-name">
                                    <img src={Icon} alt="Icon"/>
                                    <span>Das Bunker</span>
                                </div>
                                <div className="item-box">
                                    <span>Opt In?</span>
                                    <label className="checkbox-block">
                                        <input type="checkbox" />
                                        <span className="checkmark" />
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="sessions">
                       <div className="sessions-item">
                           <div className="sessions-info">
                               <span>Apple – Los Angeles, United States</span>
                               <span>Chrome – Current session</span>
                           </div>
                           <button>
                               Log Out
                           </button>
                       </div>
                        <div className="sessions-item">
                            <div className="sessions-info">
                                <span>Apple – Los Angeles, United States</span>
                                <span>Chrome – Current session</span>
                            </div>
                            <button>
                                Log Out
                            </button>
                        </div>
                        <div className="sessions-item">
                            <div className="sessions-info">
                                <span>Apple – Los Angeles, United States</span>
                                <span>Chrome – Current session</span>
                            </div>
                            <button>
                                Log Out
                            </button>
                        </div>
                        <div className="sessions-item">
                            <div className="sessions-info">
                                <span>Apple – Los Angeles, United States</span>
                                <span>Chrome – Current session</span>
                            </div>
                            <button>
                                Log Out
                            </button>
                        </div>
                        <div className="sessions-item">
                            <div className="sessions-info">
                                <span>Apple – Los Angeles, United States</span>
                                <span>Chrome – Current session</span>
                            </div>
                            <button>
                                Log Out
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}