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

interface ProjectProps {
  project: any;
}

const ProjectCard: React.FC<ProjectProps> = ({ project }) => {
  const {
    id,
    name,
    location,
    status,
    description,
    created_at,
  } = project;

  const goToDetails = () => {
    router.visit(route("project_show", id));
  };

  // ✅ Match SCSS classes exactly
  const statusClass =
    status === "on-going"
      ? styles.ongoing
      : status === "upcoming"
      ? styles.upcoming
      : status === "completed"
      ? styles.completed
      : styles.pending;

  return (
    <div className={`${styles.card} ${statusClass}`}>
      <div className={styles.content}>
        {/* Header */}
        <div className={styles.header}>
          <h2>{name}</h2>
          <span className={styles.badge}>{status}</span>
        </div>

        {/* Meta */}
        <div className={styles.meta}>
          <div className={styles.metaItem}>
            <MdLocationPin />
            <span>{location}</span>
          </div>

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

        {/* Body */}
        <div className={styles.body}>
          <p>{description}</p>
        </div>

        {/* Actions */}
        <div className={styles.actions}>
          <button onClick={goToDetails} className={styles.view}>
            <MdRemoveRedEye />
            <span>View Project</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProjectCard;