<script lang="ts">
  interface Props {
    columns: string[];
    records: any;
    removeRowHandler: (id: number) => void;
  }

  let { columns, records, removeRowHandler }: Props = $props();
</script>

<table class="table">
  <thead>
    <tr>
      {#each columns as col}
        <th scope="col">{col}</th>
      {/each}
      <th scope="col">edit</th>
      <th scope="col">remove</th>
    </tr>
  </thead>
  <tbody>
    {#each records as row}
      <tr>
        {#each columns as col}
          <td>{row[col]}</td>
        {/each}
        <td>
          <button
            onclick={() => removeRowHandler(row.id)}
            class="btn btn-outline-success align-items-center"
            aria-label="Edit record"
          >
            <i class="bi bi-pencil"></i>
          </button>
        </td>
        <td>
          <button
            onclick={() => removeRowHandler(row.id)}
            class="btn btn-outline-danger align-items-center"
            aria-label="Remove record"
          >
            <i class="bi bi-x-lg"></i>
          </button>
        </td>
      </tr>
    {/each}
  </tbody>
</table>
