import { Link } from "@tanstack/react-router";
import { Heart } from "lucide-react";
import type { Listing } from "@/lib/listings";
import { formatKz } from "@/lib/format";
import { useI18n } from "@/lib/i18n";

type Props = {
  listing: Listing;
  saved?: boolean;
  onToggleSave?: (listing: Listing) => void;
};

export function ListingCard({ listing, saved = false, onToggleSave }: Props) {
  const { t } = useI18n();
  const image = listing.images[0] ?? null;

  return (
    <article className="kuya-card group relative transition-transform hover:-translate-y-1">
      <Link
        to="/listing/$id"
        params={{ id: listing.id }}
        className="block"
        aria-label={listing.title}
      >
        <div className="relative aspect-[4/3] bg-mint">
          {image ? (
            <img
              src={image}
              alt={listing.title}
              loading="lazy"
              className="h-full w-full object-cover"
            />
          ) : null}
          {listing.is_promoted ? (
            <span className="absolute left-2 top-2 rounded-full bg-gold px-2.5 py-0.5 font-display text-[11px] font-bold text-ink">
              {t("featured")}
            </span>
          ) : null}
          {listing.instant_buy ? (
            <span className="absolute bottom-2 left-2 rounded-full bg-ink/80 px-2.5 py-0.5 font-display text-[11px] font-bold text-cream">
              {t("instantBuy")}
            </span>
          ) : null}
        </div>
        <div className="p-3">
          <h3 className="line-clamp-2 font-display text-sm leading-tight font-semibold">
            {listing.title}
          </h3>
          <p className="mt-1 text-xs text-muted-foreground">
            {listing.municipality ? `${listing.municipality} · ` : ""}
            {listing.province}
          </p>
          <p className="mt-1.5 font-display text-lg font-bold text-teal">{formatKz(listing.price)}</p>
          {listing.seller_verified ? (
            <p className="mt-1 inline-flex items-center gap-1 rounded-full bg-mint px-2 py-0.5 text-[11px] font-semibold">
              ✓ {t("verifiedSeller")}
            </p>
          ) : null}
        </div>
      </Link>
      {onToggleSave ? (
        <button
          type="button"
          onClick={() => onToggleSave(listing)}
          aria-label={t("favorites")}
          className="absolute right-2 top-2 grid size-9 place-items-center rounded-full bg-card/90 shadow-sm"
        >
          <Heart className={saved ? "size-4 fill-current text-destructive" : "size-4"} />
        </button>
      ) : null}
    </article>
  );
}