gitlab-instance-0a899031_cnomadcna/app/[locale]/dating/components/LikesPanel.tsx

"use client";

import { Link } from "@/i18n/navigation";
import { mediaUrl } from "@/app/lib/media";
import type { DatingProfile } from "../types";

interface LikesPanelProps {
  likes: DatingProfile[];
  mutual: DatingProfile[];
  formatTime: (value?: string) => string;
  t: (key: string) => string;
  onSelectProfile?: (profile: DatingProfile) => void;
}

function ProfileRow({
  profile,
  timeLabel,
  badge,
  onSelect,
}: {
  profile: DatingProfile;
  timeLabel: string;
  badge?: string;
  onSelect?: () => void;
}) {
  const className =
    "flex w-full items-center gap-3 rounded-xl border border-gray-100 bg-white p-3 text-left shadow-sm transition-shadow hover:shadow-md dark:border-gray-800 dark:bg-gray-900";
  const content = (
    <>
      <img
        src={mediaUrl(profile.photo)}
        alt={profile.name}
        className="h-12 w-12 flex-shrink-0 rounded-full object-cover shadow-sm"
      />
      <div className="min-w-0 flex-1">
        <p className="truncate font-medium text-gray-900 dark:text-gray-100">{profile.name}</p>
        <p className="truncate text-xs text-gray-500 dark:text-gray-400">📍 {profile.location}</p>
        {badge ? (
          <span className="mt-1 inline-flex rounded-full bg-pink-50 px-2 py-0.5 text-[10px] font-semibold text-pink-600 dark:bg-pink-950/40 dark:text-pink-200">
            {badge}
          </span>
        ) : null}
      </div>
      <span className="flex-shrink-0 rounded-full bg-gray-50 px-2 py-1 text-[10px] text-gray-400 dark:bg-gray-800 dark:text-gray-500">
        {timeLabel}
      </span>
    </>
  );
  if (onSelect) {
    return (
      <button type="button" onClick={onSelect} className={className}>
        {content}
      </button>
    );
  }
  return <div className={className}>{content}</div>;
}

export default function LikesPanel({ likes, mutual, formatTime, t, onSelectProfile }: LikesPanelProps) {
  return (
    <div className="space-y-6">
      <section>
        <div className="mb-3 flex items-center justify-between">
          <div>
            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t("title")} 💕</h2>
            <p className="text-sm text-gray-500 dark:text-gray-400">{t("likedYou")}</p>
          </div>
          {likes.length > 0 ? (
            <span className="rounded-full bg-[#ff4d4f] px-2 py-0.5 text-xs font-bold text-white">{likes.length}</span>
          ) : null}
        </div>
        <div className="space-y-3">
          {likes.length ? (
            likes.map((profile) => (
              <ProfileRow
                key={profile.id}
                profile={profile}
                timeLabel={formatTime(profile.likedAt)}
                onSelect={() => onSelectProfile?.(profile)}
              />
            ))
          ) : (
            <div className="rounded-xl border border-dashed border-gray-200 p-4 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
              {t("noLikesYet")}
            </div>
          )}
        </div>
      </section>

      <section>
        <div className="mb-3 flex items-center justify-between">
          <div>
            <h3 className="font-semibold text-gray-900 dark:text-gray-100">{t("mutualTitle")}</h3>
            <p className="text-xs text-gray-500 dark:text-gray-400">{t("mutualSubtitle")}</p>
          </div>
          {mutual.length > 0 ? (
            <span className="rounded-full bg-emerald-500 px-2 py-0.5 text-xs font-bold text-white">{mutual.length}</span>
          ) : null}
        </div>
        <div className="space-y-3">
          {mutual.length ? (
            mutual.map((profile) =>
              profile.conversationId ? (
                <Link
                  key={profile.id}
                  href={`/chat/${profile.conversationId}`}
                  className="block"
                >
                  <ProfileRow
                    profile={profile}
                    timeLabel={formatTime(profile.matchedAt)}
                    badge={t("mutualBadge")}
                  />
                </Link>
              ) : (
                <ProfileRow
                  key={profile.id}
                  profile={profile}
                  timeLabel={formatTime(profile.matchedAt)}
                  badge={t("mutualBadge")}
                  onSelect={() => onSelectProfile?.(profile)}
                />
              )
            )
          ) : (
            <div className="rounded-xl border border-dashed border-gray-200 p-4 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
              {t("noMutualYet")}
            </div>
          )}
        </div>
        {mutual.length > 0 ? (
          <Link
            href="/chat"
            className="mt-3 inline-flex w-full items-center justify-center rounded-full bg-[#ff4d4f] px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-600"
          >
            {t("goMessages")}
          </Link>
        ) : null}
      </section>
    </div>
  );
}