<script lang="ts">
	import { fade } from "svelte/transition";
	import IconChevronLeft from "~icons/tabler/chevron-left";
	import IconEclamationCircle from "~icons/tabler/exclamation-circle";
	import Button from "../ui/Button.svelte";
	import HorizontalSpacer from "../ui/HorizontalSpacer.svelte";
	import ResourcePageHeader from "./ResourcePageHeader.svelte";

    let {
        heading,
        children,
        error = null,
    } = $props();

    $effect(() => {
        if (error) {
            setTimeout(() => error = null, 5000)
        }
    });
</script>

<div class="flex flex-col h-full">
    <ResourcePageHeader title={heading}>
        <Button Icon={IconChevronLeft} onclick={() => history.back()} inverted>Back</Button>
    </ResourcePageHeader>
    
    <HorizontalSpacer/>
    
    <div class="text-sm text-neutral-700 flex-1 overflow-scroll">
        {@render children()}
    </div>

    {#if error}
        <div transition:fade>
            <Button Icon={IconEclamationCircle} type="button" color="danger" onclick={() => error = null}>{error} (Click to dismiss)</Button>
        </div>
    {/if}
</div>