"use client";

import Link from "next/link";
import { Bookmark, Eye, MapPin, Tag } from "lucide-react";
import clsx from "clsx";
import { Avatar } from "./Avatar";
import { useCurrency } from "@/lib/currency";
import { discountLine, hasExpired } from "@/lib/jobs";
import type { Offer } from "@/lib/types";

/**
 * One offer.
 *
 * The deal itself is the headline — "20% off", "Buy 2 get 1 free" — because
 * that is what someone is looking for. The title explains what it applies
 * to, which is the second question, not the first.
 */
export function OfferCard({
  offer,
  saved,
  onSave,
}: {
  offer: Offer;
  saved?: boolean;
  onSave?: (offer: Offer) => void;
}) {
  const { format: money } = useCurrency();
  const expired = hasExpired(offer);

  const ends = offer.endsAt
    ? new Date(offer.endsAt).toLocaleDateString(undefined, {
        day: "numeric",
        month: "short",
      })
    : null;

  return (
    <article className={clsx("of-card", expired && "expired")}>
      <Link href={`/offers/${offer.id}`} className="of-cardlink">
        <div className="of-art">
          {offer.thumbnail ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={offer.thumbnail} alt="" />
          ) : (
            <Tag size={26} aria-hidden />
          )}
          <span className="of-deal">{discountLine(offer, money)}</span>
          {expired && <span className="of-over">Ended</span>}
        </div>

        <div className="of-body">
          <h3 className="of-title">{offer.title}</h3>
          <p className="of-desc">{offer.description}</p>

          <div className="of-meta">
            {offer.price !== undefined && (
              <span className="of-was">{money(offer.price)}</span>
            )}
            {offer.location && (
              <span className="of-tag">
                <MapPin size={13} /> {offer.location}
              </span>
            )}
            {ends && (
              <span className={clsx("of-tag", expired && "gone")}>
                {expired ? "Ended " : "Until "}
                {ends}
              </span>
            )}
          </div>
        </div>
      </Link>

      <div className="of-foot">
        <Link href={`/${offer.poster.username}`} className="of-by">
          <Avatar user={offer.poster} size={22} />
          <span>{offer.poster.name || "@" + offer.poster.username}</span>
        </Link>

        <div className="of-acts">
          <span className="of-count" title="Views">
            <Eye size={13} /> {offer.views ?? 0}
          </span>
          {onSave && (
            <button
              type="button"
              className={clsx("of-save", saved && "on")}
              onClick={() => onSave(offer)}
              aria-pressed={saved}
              aria-label={saved ? "Saved" : "Save this offer"}
            >
              <Bookmark size={15} fill={saved ? "currentColor" : "none"} />
            </button>
          )}
        </div>
      </div>
    </article>
  );
}