<script lang="ts">
    import {
        parseConfig,
        formatDate,
        type SimulationState,
    } from "./simulationState.svelte";

    let { state }: { state: SimulationState } = $props();
</script>

<main class="table-content">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Sim Name</th>
                <th>Search Pattern</th>
                <th>Date Run</th>
                <th>Link</th>
            </tr>
        </thead>
        <tbody>
            {#each state.paginatedSimulations as sim}
                <tr>
                    <td>{sim.id}</td>
                    <td>{sim.name}</td>
                    <td style="text-transform: capitalize;"
                        >{parseConfig(sim.config).pattern || "Unknown"}</td
                    >
                    <td>{formatDate(sim.created_at)}</td>
                    <td><a href={`/simulation/${sim.id}`}>View Details</a></td>
                </tr>
            {/each}
        </tbody>
    </table>

    <div class="pagination">
        <button
            onclick={() => state.goToPage(state.currentPage - 1)}
            disabled={state.currentPage === 1}
        >
            Previous
        </button>
        <span>Page {state.currentPage} of {state.totalPages}</span>
        <button
            onclick={() => state.goToPage(state.currentPage + 1)}
            disabled={state.currentPage === state.totalPages}
        >
            Next
        </button>
    </div>
</main>
