import Link from "next/link";
import { comparisonRows } from "@/content/loan-comparisons";
import styles from "./loan-comparison.module.css";

export function LoanComparison({ slug }: { slug: string }) {
  const rows = comparisonRows(slug);
  if (!rows.length) return null;
  return (
    <section className={styles.section} aria-labelledby="loan-comparison-title">
      <div className={styles.inner}>
        <h2 className={styles.title} id="loan-comparison-title">
          Compare related loan services
        </h2>
        <p className={styles.intro}>
          These pages cover different borrowing needs. Use the comparison to
          explore the information available, then ask MaxCredit about the
          requirements and terms that apply to your enquiry.
        </p>
        <table className={styles.table}>
          <caption>Service focus and questions to ask</caption>
          <thead>
            <tr>
              <th scope="col">Service</th>
              <th scope="col">Page focus</th>
              <th scope="col">Ask about</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.slug}>
                <th scope="row">
                  {row.slug === slug ? (
                    row.label
                  ) : (
                    <Link href={`/${row.slug}`}>{row.label}</Link>
                  )}
                </th>
                <td>{row.focus}</td>
                <td>{row.question}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className={styles.followup}>
          For current product details,{" "}
          <Link href="/contact">contact MaxCredit</Link>. Before borrowing,
          understand the costs and repayment obligations. Read the{" "}
          <a href="https://rom.mlaw.gov.sg/information-for-borrowers/guide-to-borrowing-from-licensed-moneylenders-english/">
            Ministry of Law’s borrower guide
          </a>
          .
        </p>
      </div>
    </section>
  );
}