<script lang="ts">
    import type Column from "./Column";
    import DataCell from "./DataCell.svelte";

    export let columns: Array<Column>;
    export let data: any;
    export let showAlternative: boolean;
    export let rowIndex: number = 0;

    const handleRowKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            // Trigger click event for keyboard users
            const clickEvent = new MouseEvent('click', {
                bubbles: true,
                cancelable: true
            });
            event.currentTarget?.dispatchEvent(clickEvent);
        }
    };
</script>

<div 
    class="table-row" 
    class:alternative={showAlternative}
    role="row"
    tabindex="0"
    aria-rowindex={rowIndex + 2}
    on:click
    on:keydown={handleRowKeyDown}
>
    {#each columns as column, idx}
        <DataCell {idx} {column} {data}/>
    {/each}
</div>