import React from 'react';
import { FaFilePdf } from 'react-icons/fa';

import dmf from '../pdf/DMFu.pdf';
import report1 from '../pdf/MIGRATION-OF-CERTAIN-ELEMENTS.pdf';
import report2 from '../pdf/OVERALL-MIGRATION.pdf';

import styles from '../styles/TestReports.module.css';

export default function TestReports() {
  const reports = [
    { id: 1, title: 'DMFu Report', file: dmf },
    { id: 2, title: 'Migration of Certain Elements', file: report1 },
    { id: 3, title: 'Overall Migration', file: report2 },
  ];

  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>🧪 Our Test Reports</h1>

      <div className={styles.grid}>
        {reports.map((report) => (
          <div key={report.id} className={styles.card}>
            <h2 className={styles.cardTitle}>{report.title}</h2>
            <a href={report.file} download>
              <button className={styles.button}>
                <FaFilePdf />
                Download PDF
              </button>
            </a>
          </div>
        ))}
      </div>
    </div>
  );
}
