import type { DiscoverMinnect } from "@/lib/discover";
import { MinnectMedia } from "./MinnectMedia";
import { initials } from "@/lib/feed-model";

export function TrendingMinnectsRail({ minnects }: { minnects: DiscoverMinnect[] }) {
  if (minnects.length === 0) return null;
  return (
    <section className="rail" aria-labelledby="rail-trending">
      <h2 id="rail-trending">Trending minnects</h2>
      <ul className="rail-list">
        {minnects.map((m) => {
          const who = m.expert.displayName || "Expert";
          return (
            <li key={String(m.id)} className="rail-card minnect-card" data-testid="minnect-card">
              <div className="minnect-who">
                {m.expert.pictureUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img className="avatar avatar-sm" src={m.expert.pictureUrl} alt="" width={28} height={28} />
                ) : (
                  <span className="avatar avatar-sm avatar-initials" aria-hidden="true">{initials(who)}</span>
                )}
                <strong className="rail-name">{who}</strong>
              </div>
              <MinnectMedia media={m.media} thumbnailUrl={m.thumbnailUrl} question={m.question} who={who} />
              {m.question ? <p className="minnect-question">{m.question}</p> : null}
              {m.views !== null ? (
                <span className="rail-meta">{m.views.toLocaleString("en-US")} {m.views === 1 ? "view" : "views"}</span>
              ) : null}
            </li>
          );
        })}
      </ul>
    </section>
  );
}