import { Project } from "@/types/types";
import React from "react";
import RoundedDiv from "../elements/RoundedDiv";
import Image from "next/image";
import Link from "next/link";
import ProjectCreator from "./ProjectPage/ProjectCreator";

function MainProjectCard({
  project,
  statusType,
  color,
  full,
  borderColor,
  textColor,
  isSample,
  sampleType,
}: {
  project: Project;
  statusType?: string;
  color?: string;
  borderColor?: string;
  textColor?: string;
  full?: boolean;
  isSample?: boolean;
  sampleType?: string;
}) {
  return (
    <div
      className={`w-full px-5 py-4 border bg-tertiary-light dark:bg-tertiary-dark border-border-secondary-dark dark:border-border-secondary-dark rounded-3xl my-4 md:my-5 relative text-xs md:text-sm font-semibold ${
        project?.project_type === "highlight" ||
        (isSample && sampleType == "highlight")
          ? "!bg-highlight-light dark:!bg-highlight-dark"
          : ""
      }`}
    >
      {project?.project_type === "force" && (
        <RoundedDiv className="bg-[#FFBDBD] dark:bg-[#794a4a] !border-[#FFBDBD] h-7 w-28 absolute left-4 -top-3">
          فوری
        </RoundedDiv>
      )}
      {isSample && sampleType == "force" && (
        <RoundedDiv className="bg-[#FFBDBD] dark:bg-[#794a4a] !border-[#FFBDBD] h-7 w-28 absolute left-4 -top-3">
          فوری
        </RoundedDiv>
      )}
      {statusType && (
        <RoundedDiv
          style={{
            backgroundColor: color ? color : "",
            borderColor: borderColor ? borderColor : "",
            color: textColor ? textColor : "",
          }}
          className="h-6 w-28 absolute right-4 -top-3"
        >
          {statusType}
        </RoundedDiv>
      )}
      <Link
        href={`/projects/${project?._id}/${project?.title}`}
        key={project._id}
      >
        <h4 className="text-text-blue-light dark:text-text-blue-dark font-semibold">
          {project?.title}
        </h4>
      </Link>
      <h5 className="text-text-red-light dark:text-text-red-dark font-semibold line-clamp-2 mt-2">
        {project?.expertise}
        {project?.sub_expertise ? (
          <>
            {" _ "}
            {project?.sub_expertise.length !== 0 &&
            project?.sub_expertise.length > 1 ? (
              project?.sub_expertise.map((subItem, index) => (
                <span key={index}>
                  {subItem}
                  {index !== project?.sub_expertise.length - 1 && " _ "}
                </span>
              ))
            ) : (
              <span>{project?.sub_expertise}</span>
            )}
          </>
        ) : (
          ""
        )}
        {project?.gender && (
          <span>{project?.gender == "male" ? " آقا" : " خانم"}</span>
        )}
      </h5>
      {full && <ProjectCreator creator={project?.creator} />}
      <p className={`mt-2 leading-5 ${full ? "" : "line-clamp-2"}`}>
        {project?.description}
      </p>
      <div className="grid grid-cols-2 gap-2 mt-3">
        <div className="flex md:justify-center md:my-1 items-center gap-1 text-[.7rem] md:text-sm">
          <Image
            width={23}
            height={23}
            alt="location icon"
            src="/images/icons/location.svg"
            className="dark:invert"
          />
          <span>لوکیشن: شهر </span>
          <span>{project?.city && project?.city?.name}</span>
        </div>
        <div className="flex md:justify-center md:my-1 items-center gap-1 text-[.7rem] md:text-sm">
          <Image
            width={23}
            height={23}
            alt="clock icon"
            src="/images/icons/clock.svg"
            className="dark:invert"
          />
          <span>زمان پیشنهادی:</span>
          <span>{project?.offer_time} روز</span>
        </div>
        <div className="flex md:justify-center md:my-1 items-center gap-1 text-[.7rem] md:text-sm">
          <Image
            width={23}
            height={23}
            alt="timer icon"
            src="/images/icons/timer.svg"
            className="dark:invert"
          />
          <span>رده سنی:</span>
          <span>{project?.age == "all" ? "همه" : project?.age}</span>
        </div>
        <div className="flex md:justify-center md:my-1 items-center gap-1 text-[.7rem] md:text-sm">
          <Image
            width={23}
            height={23}
            alt="woman icon"
            src="/images/icons/woman.svg"
            className="dark:invert"
          />
          <span>جنسیت:</span>
          <span>{project?.gender == "male" ? "آقا" : "خانم"}</span>
        </div>
      </div>
      <div className="flex max-w-lg mx-auto mt-4 gap-4">
        <RoundedDiv
          className={`text-[#007019] border-[#007019] w-full h-8 text-[.7rem] md:text-sm ${
            project?.project_type === "highlight"
              ? "dark:bg-[#007019] dark:text-white"
              : ""
          }`}
        >
          بودجه: {Number(project?.offer_price).toLocaleString()}
        </RoundedDiv>
        <RoundedDiv
          className={`text-[#17337B] border-[#17337B] w-full h-8 text-[.7rem] md:text-sm ${
            project?.project_type === "highlight"
              ? "dark:bg-[#17337B] dark:text-white"
              : ""
          }`}
        >
          تعداد پیشنهاد: {project?.requested_users?.length}
        </RoundedDiv>
      </div>
    </div>
  );
}

export default MainProjectCard;
