import React from "react";
import {
  RISK_ASSESSMENT_COLUMN_HEADERS,
  RISK_ASSESSMENT_COLUMN_SLOTS,
  getRiskAssessmentPreviewRows,
  readRiskAnswer
} from "../../utils/riskAssessmentHelpers.js";

function PreviewCell({ value }) {
  const text = String(value || "").trim();
  return <div className="ptw-preview-value">{text || "\u00A0"}</div>;
}

export default function PtwRiskAssessmentTablePreview({
  section,
  questions = [],
  answers = {}
}) {
  const rows = getRiskAssessmentPreviewRows(questions, answers);

  return (
    <div className="ptw-risk-section ptw-risk-section--preview">
      <div className="ptw-risk-section__table-wrap">
        <table className="ptw-doc-job-table ptw-risk-section__table">
          <colgroup>
            <col className="ptw-risk-section__col-steps" />
            <col className="ptw-risk-section__col-hazard" />
            <col className="ptw-risk-section__col-harm" />
            <col className="ptw-risk-section__col-controls" />
            <col className="ptw-risk-section__col-implemented" />
          </colgroup>
          <thead>
            <tr>
              {RISK_ASSESSMENT_COLUMN_HEADERS.map((header) => (
                <th key={header} className="ptw-doc-job-table__label ptw-risk-section__head">
                  {header}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row, index) => (
              <tr key={`risk-preview-${index}`}>
                {RISK_ASSESSMENT_COLUMN_SLOTS.map((slot) => (
                  <td key={`risk-preview-${index}-${slot}`}>
                    <PreviewCell value={readRiskAnswer(answers, row[slot])} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
