import React, { useState } from "react";
import moment from "moment";
import { ProjectStatus } from "../../utils/projectStatus";
const AboutProject = ({ data }) => {
  const [CurrentProject, setCurrentProject] = useState(data);

  return (
    <>
      {data && (
        <div className="card mb-6">
          <div className="card-body">
            <small className="card-text text-uppercase text-muted small">
              Profile
            </small>
            <ul className="list-unstyled my-3 py-1">
              <li className="d-flex align-items-center mb-4">
                <i className="bx bx-check"></i>
                <span className="fw-medium mx-2">Start Date:</span>{" "}
                <span>
                  {data.startDate
                    ? moment(data.startDate).format("DD-MMM-YYYY")
                    : "N/A"}
                </span>
              </li>
              <li className="d-flex align-items-center mb-4">
                <i className="bx bx-stop-circle"></i>{" "}
                <span className="fw-medium mx-2">End Date:</span>{" "}
                <span>
                  {data.endDate
                    ? moment(data.endDate).format("DD-MMM-YYYY")
                    : "N/A"}
                </span>
              </li>
              <li className="d-flex align-items-center mb-2">
                <i className="bx bx-trophy"></i>
                <span className="fw-medium mx-2">Status:</span>{" "}
                <span>{ProjectStatus(data.projectStatusId)}</span>
              </li>
            </ul>
            <small className="card-text text-uppercase text-muted small">
              Contacts
            </small>
            <ul className="list-unstyled my-3 py-1">
              <li className="d-flex align-items-center mb-4">
                <i className="bx bx-user"></i>
                <span className="fw-medium mx-2">Contact:</span>{" "}
                <span>{data.contactPerson}</span>
              </li>
              <li className="d-flex align-items-center mb-4">
                <i className="bx bx-phone"></i>
                <span className="fw-medium mx-2">Contact Number:</span>{" "}
                <span>NA</span>
              </li>
              <li className="d-flex align-items-center mb-4">
                <i className="bx bx-envelope"></i>
                <span className="fw-medium mx-2">Email:</span> <span>NA</span>
              </li>
              <li className="d-flex align-items-center mb-4">
                <i className="bx bx-flag"></i>
                <span className="fw-medium mx-2">Address:</span>{" "}
              </li>
              <li className="d-flex align-items-start test-start mb-4">
                <span>{data.projectAddress}</span>
              </li>
            </ul>
          </div>
        </div>
      )}

      {!data && <span>loading...</span>}
    </>
  );
};

export default AboutProject;
