import React from "react";

const CardViewDirectory = ({contact}) => {
  return (
    <div class="card text-start ">
      <div class="card-body d-flex justify-content-between px-1 py-2">
        <div>
                  <p className="fs-6 m-0">{contact.name}</p>
          <small className="simple-text m-0 text-muted"></small>
        </div>
        <div>
          <div className="dropdown z-2 ">
            <button
              type="button"
              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <i
                className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
                data-bs-toggle="tooltip"
                data-bs-offset="0,8"
                data-bs-placement="top"
                data-bs-custom-class="tooltip-dark"
                title="More Action"
              ></i>
            </button>
            <ul className="dropdown-menu dropdown-menu-end w-auto">
              <li >
                <a className="dropdown-item px-2 py-0">
                  <i className="bx bx-pencil bx-xs me-2"></i>
                  <span className="align-left small-text">Modify</span>
                </a>
              </li>
              <li>
                <a className="dropdown-item  px-2 py-0">
                  <i className="bx bx-trash bx-xs me-2"></i>
                  <span className="align-left small-text">Delete</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card-footer text-start px-1 py-1">
        <hr className="my-0"/>
              {contact.contactEmails && <ul className="list-inline my-1 ">
                  <li className="list-inline-item me-2">
                      <i className="bx bx-envelope bx-xs"></i>
                  </li>
                  <li className="list-inline-item small-text">{contact.contactEmails[ 0 ]?.emailAddress}</li>
              </ul>}

              {contact.contactPhones && <ul className="list-inline m-0">
                  <li className="list-inline-item me-2">
                      <i className="bx bx-phone bx-xs"></i>
                  </li>
                  <li className="list-inline-item small-text">{contact.contactPhones[ 0 ]?.phoneNumber}</li>
              </ul>}

      <ul className="list-inline m-0">
        <li className="list-inline-item me-2">
          <i className="bx bx-merge bx-xs"></i>
        </li>
                  <li className="list-inline-item small-text">
                      {contact.contactCategory.name}
        </li>
      </ul>

      </div>
    </div>
  );
};

export default CardViewDirectory;