<script lang="ts">
    import { currentDate, dateUpdate } from '../stores/appStore';
    import { getClientDateRep } from '../modules/dateHelpers';
    import InvertableIconButton from './InvertableIconButton.svelte';

    async function setDate(day: number) {
        var newDate = new Date($currentDate);
        newDate.setDate(newDate.getDate() + day);
        currentDate.set(newDate);
        $dateUpdate();
    }
</script>

<div class="flex content-center justify-center">
    <div class="h-3.5 w-3.5 -mt-0.5">
        <InvertableIconButton label="left" icon="/chevron-left-solid.svg" clickHandler={() => {setDate(-1);}}/>
    </div>
    <div class="ml-2 mr-2">
        {getClientDateRep($currentDate)}
    </div>
    <div class="h-3.5 w-3.5 -mt-0.5">
        <InvertableIconButton label="right" icon="/chevron-right-solid.svg" clickHandler={() => {setDate(1);}}/>
    </div>
</div>