<script>

    import Icon from "../common/Icon.svelte";
    import PreviewCardSmall from "./PreviewCardSmall.svelte";

    export let managerRecords;
    
    export let graph;
</script>

{#if managerRecords.length > 0}
    <div
        class="record-history d-flex justify-content-center align-items-center w-100 mb-4 mt-4"
    >
        {#each managerRecords.reverse() as arecord, i}
            {#if i !== 0}
                <Icon icon="angle-right"/>
            {/if}

            <div class="mx-3  p-0 my-0">
                <PreviewCardSmall record={arecord} {graph}/>
            </div>
        {/each}
    </div>
{/if}

<style>
    .record-history {
        /* background-color: #fff; */
        padding: 15px 10px;
        border-radius: 32px;
        line-height: 12px;
    }
</style>
