import type { ProductSurfaceMatrixRow } from '../../site-data'

export function ProductSurfaceMatrix({
  rows,
}: {
  rows: readonly ProductSurfaceMatrixRow[]
}) {
  return (
    <div className="surface-matrix">
      {rows.map((row) => (
        <article key={row.title} className="card surface-matrix__card">
          <p className="status-pill status-pill--info">{row.posture}</p>
          <div>
            <h3>{row.title}</h3>
            <p>{row.description}</p>
          </div>
          <section className="surface-matrix__section">
            <h4>Owns today</h4>
            <ul className="list">
              {row.owns.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </section>
          <section className="surface-matrix__section">
            <h4>Does not claim</h4>
            <ul className="list">
              {row.doesNotClaim.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </section>
          <p className="surface-matrix__next">
            <strong>Use it next:</strong> {row.nextStep}
          </p>
        </article>
      ))}
    </div>
  )
}
