import { INK, RED, MUTE, FONT_MONO, FONT_SERIF } from "../../theme";
import { genderLabel } from "../../constants";
import { relTime } from "../../lib/dates";
import { fmtDistance } from "../../lib/geo";
import { marked } from "../../lib/highlight";
import AirmailEdge from "../../components/AirmailEdge";

/*
 * Eén profiel in de zoekresultaten. `onReport` mag ook hier: een nepprofiel of iemand die duidelijk
 * te jong is, zie je aan het profiel — daarvoor eerst een brief moeten schrijven zou onzin zijn.
 */
export default function ProfileCard({ user, onWrite, onReport }) {
  const distance = fmtDistance(user.distanceKm);
  return (
    <article style={{ border: `2px solid ${INK}`, marginBottom: 16, background: "#fff" }}>
      <AirmailEdge h={6} />
      <div style={{ padding: "14px 16px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>
            {user.name}, {user.age}
          </h2>
          <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: MUTE, whiteSpace: "nowrap" }}>
            {distance && <>{distance} · </>}
            {relTime(user.lastActive)}
          </span>
        </div>
        {/* gender bij iedereen (dus "vrouw" én "trans vrouw" op dezelfde plek), plus relatiestatus als die er is */}
        <p style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE, margin: "4px 0 0" }}>
          {[genderLabel(user), user.relationship === "relatie" && "in een relatie"].filter(Boolean).join(" · ")}
        </p>
        <p style={{ fontFamily: FONT_SERIF, fontSize: 15, lineHeight: 1.65, margin: "10px 0 14px" }}>
          {marked(user.textMarked ?? user.text)}
        </p>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
          <button
            onClick={onWrite}
            style={{
              background: RED, color: "#fff", border: "none", padding: "10px 18px",
              fontSize: 14, fontWeight: 700, letterSpacing: "0.02em",
            }}
          >
            ✉ Schrijf {user.name} een brief
          </button>
          {onReport && (
            <button
              onClick={onReport}
              aria-label={`${user.name} melden bij de beheerder`}
              title="Melden — gaat naar de beheerder; de ander hoort er niets van"
              style={{
                background: "none", border: "none", color: MUTE, fontFamily: FONT_MONO, fontSize: 11,
                padding: "10px 0", flexShrink: 0,
              }}
            >
              ⚑ meld
            </button>
          )}
        </div>
      </div>
    </article>
  );
}