/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./project-overview.module.scss";
import { MdLocationPin, MdTimer, MdDeleteForever, MdOutlineEditLocation } from "react-icons/md";
import { formatDateReadable } from "@/lib/utils";

const ProjectOverview = ({ project }: any) => {
  const { name, status, description, location, created_at } = project;

  const handleEdit = () => alert("Edit clicked");
  const handleDelete = () => alert("Delete clicked");

  return (
    <div className={styles.overview}>
      {/* Project Info Left Section */}
      <div className={styles.left}>
        <div className={styles.leftText}>
          <div className={styles.top}>
            <div className={styles.header}>
              <h1>{name}</h1>
              <span
                className={
                  status === "on-going"
                    ? styles.ongoing
                    : status === "pending"
                    ? styles.pending
                    : styles.completed
                }
              >
                {status}
              </span>
            </div>

            <div className={styles.meta}>
              <div className={styles.metaItem}>
                <MdLocationPin /> {location}
              </div>
              <div className={styles.metaItem}>
                <MdTimer /> {formatDateReadable(created_at)}
              </div>
            </div>
          </div>

          <p>{description}</p>
        </div>

        <div className={styles.buttons}>
          <div className={styles.update} onClick={handleEdit}>
            Update <MdOutlineEditLocation size="1.2rem" />
          </div>
          <div className={styles.delete} onClick={handleDelete}>
            Delete <MdDeleteForever size="1.2rem" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProjectOverview;