"use client";

import Link from "next/link";
import { Bookmark, Briefcase, Eye, MapPin, Users } from "lucide-react";
import clsx from "clsx";
import { Avatar } from "./Avatar";
import { useCurrency } from "@/lib/currency";
import { JOB_TYPES, salaryLine } from "@/lib/jobs";
import type { Job } from "@/lib/types";

/**
 * One job advert, as it appears in a list.
 *
 * The salary leads, because it is the thing people scan for and the thing
 * most adverts hide. A job with no salary says so plainly rather than
 * leaving a gap, which is the honest version of the same information.
 */
export function JobCard({
  job,
  saved,
  onSave,
  applications,
}: {
  job: Job;
  saved?: boolean;
  onSave?: (job: Job) => void;
  /** Shown to the poster: how many people have applied. */
  applications?: number;
}) {
  const { format: money } = useCurrency();
  const pay = salaryLine(job, money);
  const type = JOB_TYPES.find((t) => t.value === job.type);

  return (
    <article className={clsx("jb-card", !job.open && "closed")}>
      <Link href={`/jobs/${job.id}`} className="jb-cardlink">
        <div className="jb-cardtop">
          <div className="jb-logo" aria-hidden>
            {job.coverImage ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={job.coverImage} alt="" />
            ) : (
              <Briefcase size={20} />
            )}
          </div>

          <div className="jb-headings">
            <h3 className="jb-title">{job.title}</h3>
            <p className="jb-poster">{job.poster.name || "@" + job.poster.username}</p>
          </div>

          {!job.open && <span className="jb-closed">Closed</span>}
        </div>

        <p className="jb-desc">{job.description}</p>

        <div className="jb-meta">
          {job.location && (
            <span className="jb-tag">
              <MapPin size={13} /> {job.location}
            </span>
          )}
          {type && <span className="jb-tag">{type.label}</span>}
          {job.category && <span className="jb-tag">{job.category}</span>}
        </div>
      </Link>

      <div className="jb-cardfoot">
        <span className={clsx("jb-pay", !pay && "muted")}>
          {pay || "Salary not stated"}
        </span>

        <div className="jb-cardacts">
          {applications !== undefined && (
            <span className="jb-count" title="Applications">
              <Users size={13} /> {applications}
            </span>
          )}
          <span className="jb-count" title="Views">
            <Eye size={13} /> {job.views ?? 0}
          </span>
          {onSave && (
            <button
              type="button"
              className={clsx("jb-save", saved && "on")}
              onClick={() => onSave(job)}
              aria-pressed={saved}
              aria-label={saved ? "Saved" : "Save this job"}
            >
              <Bookmark size={15} fill={saved ? "currentColor" : "none"} />
            </button>
          )}
        </div>
      </div>

      <Link href={`/${job.poster.username}`} className="jb-avatar" aria-hidden tabIndex={-1}>
        <Avatar user={job.poster} size={26} />
      </Link>
    </article>
  );
}