---
import MarkdownSource from './MarkdownSource.astro'
import { markdownTable } from '@shared/lib/markdown-source'
import payments from '@data/payments.json'

// Same list as a table for the page's .md mirror
const markdown = markdownTable(
  ['Provider', 'CSS class', 'Dark variant'],
  payments.map((payment) => [payment.name, `\`.payment-provider-${payment.logo}\``, `\`.payment-provider-${payment.logo}-dark\``]),
)
---

<table class="table table-vcenter">
  <thead>
    <tr>
      <th class="w-1">Icon light</th>
      <th class="w-1">Icon dark</th>
      <th>Provider name</th>
      <th>CSS class</th>
    </tr>
  </thead>
  <tbody>
    {
      payments.map((payment) => {
        return (
          <tr>
            <td>
              <div class={`payment payment-sm payment-provider-${payment.logo}`} />
            </td>
            <td>
              <div class={`payment payment-sm payment-provider-${payment.logo}-dark`} />
            </td>
            <td>{payment.name}</td>
            <td>
              <>
                <code>.payment-provider-{payment.logo}</code>
                <br />
              </>
              <code>.payment-provider-{payment.logo}-dark</code>
            </td>
          </tr>
        )
      })
    }
  </tbody>
</table>
<MarkdownSource name="Payments" markdown={markdown} />