import Link from "next/link";
import type { WriterProfile } from "@/services/joomlaService";
import { displayOnlyCount, hireWriterUrl } from "@/lib/pageHelpers";

/**
 * The `.experts-list` card grid on free-tool pages (e.g. `summary-generator`'s
 * `.paraphras-experts` block) — `ContentHelper::writers_data('tools', ...)` on
 * the live site, a writer-profile widget keyed off real `JM_contact_details`
 * rows (same "Writers" category every other writer listing in this app
 * reads), not placeholder content. Swapped in for the article's literal
 * `writer_code` token — see `WRITER_CODE_TOKEN` below.
 */
export function FreeToolExpertsList({ writers, images }: { writers: WriterProfile[]; images: string[] }) {
  if (writers.length === 0) return null;
  return (
    <ul className="experts-list">
      {writers.map((writer, i) => (
        <li key={writer.id}>
          {/* eslint-disable-next-line @next/next/no-img-element -- resolved CMS/fallback image */}
          <img src={images[i]} alt={writer.name} className="profile-photo" />
          <p className="expt-name">{writer.name}</p>
          <p className="exp-degree">{writer.degree}</p>
          <div className="exp-details">
            <div className="exp-order">
              <span className="total-order">{displayOnlyCount(writer.id, 150, 1400)}+</span>
              Completed Orders
            </div>
            <div className="exp-rating">
              <span className="rating-value">{(writer.rating ?? 5).toFixed(1)}/5</span>
              Experts Rating
            </div>
          </div>
          <div className="hover-detail">
            <div className="head">
              <p className="expt-name">{writer.name}</p>
              <p className="exp-degree">{writer.degree}</p>
            </div>
            <Link href={`/writers/${writer.alias}`} className="viewprofile">
              Profile View
            </Link>
            <a href={hireWriterUrl(writer.name)} className="hire">
              Hire Now
            </a>
          </div>
        </li>
      ))}
    </ul>
  );
}