---
interface Command {
  name: string;
  syntax: string;
  description: string;
}

interface Props {
  commands: Command[];
}

const { commands } = Astro.props;
---

<div class="command-table-wrapper">
  <table class="command-table">
    <thead>
      <tr>
        <th>Command</th>
        <th>Syntax</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      {commands.map((cmd) => (
        <tr>
          <td><code>{cmd.name}</code></td>
          <td><code>{cmd.syntax}</code></td>
          <td>{cmd.description}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>

<style>
  .command-table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
  }

  .command-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  .command-table th {
    background: var(--sl-color-gray-6);
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 2px solid var(--sl-color-gray-5);
  }

  .command-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--sl-color-gray-5);
    vertical-align: top;
  }

  .command-table tr:hover {
    background: var(--sl-color-gray-7);
  }

  .command-table code {
    font-size: 0.85em;
    background: var(--sl-color-bg-inline-code);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    white-space: nowrap;
  }
</style>