"use client";

import Link from "next/link";
import { useI18n } from "@/lib/i18n";
import type { MemberProfile } from "@/lib/types";

export default function MemberProfileClient({ profile }: { profile: MemberProfile }) {
  const { t } = useI18n();
  const photo = profile.photo || "";
  const isUrl = photo.startsWith("http");

  return (
    <div className="dating-page">
      <div className="container">
        <nav className="detail-nav">
          <Link href="/dating">← {t.nav.dating}</Link>
          <span> · </span>
          <Link href="/chat">{t.nav.chat}</Link>
        </nav>
        <div className="dating-card reveal" style={{ maxWidth: 480 }}>
          <div className="dating-card-photo">
            {isUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={photo} alt="" className="member-photo-img" />
            ) : (
              photo || "🧑‍💻"
            )}
          </div>
          <h2>
            {profile.name}
            {profile.vip ? " ✨" : ""}
          </h2>
          <p className="dating-meta">{profile.location || "全球游民"}</p>
          <p>{profile.bio || "这位游民还没写自我介绍"}</p>
          <div className="dating-tags">
            {(profile.tags || []).map((tag) => (
              <span key={tag} className="meetup-tag">
                {tag}
              </span>
            ))}
          </div>
          <div className="dating-empty-actions" style={{ marginTop: "1.25rem" }}>
            <Link href="/dating" className="btn btn-primary btn-sm">
              继续匹配
            </Link>
            <Link href="/meetups" className="btn btn-sm">
              去活动认识人
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}