import React from "react";

const ActivityTimeline = () => {
  return (
    // <div className="card card-action mb-6">
    //   <div className="card-header align-items-center">
    //     <h5 className="card-action-title mb-0">
    //       <i className="bx bx-bar-chart-alt-2 bx-lg text-body me-4"></i>
    //       Activity Timeline
    //     </h5>
    //   </div>
    //   <div className="card-body pt-3">
    //     <ul className="timeline mb-0">
    //       <li className="timeline-item timeline-item-transparent">
    //         <span className="timeline-point timeline-point-primary"></span>
    //         <div className="timeline-event">
    //           <div className="timeline-header mb-3">
    //             <h6 className="mb-0">12 Invoices have been paid</h6>
    //             <small className="text-muted">12 min ago</small>
    //           </div>
    //           <p className="mb-2">Invoices have been paid to the company</p>
    //           <div className="d-flex align-items-center mb-2">
    //             <div className="badge bg-lighter rounded d-flex align-items-center">
    //               <img
    //                 src="../../assets//img/icons/misc/pdf.png"
    //                 alt="img"
    //                 width="15"
    //                 className="me-2"
    //               ></img>
    //               <span className="h6 mb-0 text-body">invoices.pdf</span>
    //             </div>
    //           </div>
    //         </div>
    //       </li>
    //       <li className="timeline-item timeline-item-transparent">
    //         <span className="timeline-point timeline-point-success"></span>
    //         <div className="timeline-event">
    //           <div className="timeline-header mb-3">
    //             <h6 className="mb-0">Client Meeting</h6>
    //             <small className="text-muted">45 min ago</small>
    //           </div>
    //           <p className="mb-2">Project meeting with john @10:15am</p>
    //           <div className="d-flex justify-content-between flex-wrap gap-2 mb-2">
    //             <div className="d-flex flex-wrap align-items-center mb-50">
    //               <div className="avatar avatar-sm me-3">
    //                 <img
    //                   src="../../assets/img/avatars/1.png"
    //                   alt="Avatar"
    //                   className="rounded-circle"
    //                 ></img>
    //               </div>
    //               <div>
    //                 <p className="mb-0 small fw-medium">
    //                   Lester McCarthy (Client)
    //                 </p>
    //                 <small>CEO of ThemeSelection</small>
    //               </div>
    //             </div>
    //           </div>
    //         </div>
    //       </li>
    //       <li className="timeline-item timeline-item-transparent">
    //         <span className="timeline-point timeline-point-info"></span>
    //         <div className="timeline-event">
    //           <div className="timeline-header mb-3">
    //             <h6 className="mb-0">Create a new project for client</h6>
    //             <small className="text-muted">2 Day Ago</small>
    //           </div>
    //           <p className="mb-2">6 team members in a project</p>
    //           <ul className="list-group list-group-flush">
    //             <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
    //               <div className="d-flex flex-wrap align-items-center">
    //                 <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
    //                   <li
    //                     data-bs-toggle="tooltip"
    //                     data-popup="tooltip-custom"
    //                     data-bs-placement="top"
    //                     className="avatar pull-up"
    //                     aria-label="Vinnie Mostowy"
    //                     data-bs-original-title="Vinnie Mostowy"
    //                   >
    //                     <img
    //                       className="rounded-circle"
    //                       src="../../assets/img/avatars/1.png"
    //                       alt="Avatar"
    //                     ></img>
    //                   </li>
    //                   <li
    //                     data-bs-toggle="tooltip"
    //                     data-popup="tooltip-custom"
    //                     data-bs-placement="top"
    //                     className="avatar pull-up"
    //                     aria-label="Allen Rieske"
    //                     data-bs-original-title="Allen Rieske"
    //                   >
    //                     <img
    //                       className="rounded-circle"
    //                       src="../../assets/img/avatars/4.png"
    //                       alt="Avatar"
    //                     ></img>
    //                   </li>
    //                   <li
    //                     data-bs-toggle="tooltip"
    //                     data-popup="tooltip-custom"
    //                     data-bs-placement="top"
    //                     className="avatar pull-up"
    //                     aria-label="Julee Rossignol"
    //                     data-bs-original-title="Julee Rossignol"
    //                   >
    //                     <img
    //                       className="rounded-circle"
    //                       src="../../assets/img/avatars/2.png"
    //                       alt="Avatar"
    //                     ></img>
    //                   </li>
    //                   <li className="avatar">
    //                     <span
    //                       className="avatar-initial rounded-circle pull-up text-heading"
    //                       data-bs-toggle="tooltip"
    //                       data-bs-placement="bottom"
    //                       data-bs-original-title="3 more"
    //                     >
    //                       +3
    //                     </span>
    //                   </li>
    //                 </ul>
    //               </div>
    //             </li>
    //           </ul>
    //         </div>
    //       </li>
    //     </ul>
    //   </div>
    // </div>
    <div className="misc-wrapper">
    <h2 className="mb-2 mx-2">Coming Soon!</h2>
    <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
    Thank you for your patience!</p>
    <div className="mt-4">
        <img
            src="../assets/img/illustrations/girl-doing-yoga-light.png"
            alt="girl-doing-yoga-light"
            aria-label="Girl doing yoga light"
            width="500"
            className="img-fluid"
            data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
            data-app-light-img="illustrations/girl-doing-yoga-light.png" />
    </div>
</div>
  );
};

export default ActivityTimeline;
