<script lang="ts">
    import Tooltip from "$lib/Tooltip.svelte";
    import type { ServiceDetail } from "@owlboard/ts-types";
    import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";

    export let serviceDetails: ServiceDetail;
</script>

{#if serviceDetails.firstClass}
    <Tooltip text="First Class is available">
        <IconSquare1 />
    </Tooltip>
{/if}

{#if serviceDetails.catering}
    <Tooltip text="Catering is available">
        <IconToolsKitchen2 />
    </Tooltip>
{/if}

{#if serviceDetails.sleeper}
    <Tooltip text="Sleeping Berths are available">
        <IconBed />
    </Tooltip>
{/if}

{#if serviceDetails.vstp}
    <Tooltip text="This is a VSTP planned service">
        <IconSquareLetterV />
    </Tooltip>
{/if}

<!-- Render a newline if any of the icons is to appear -->
{#if serviceDetails.firstClass || serviceDetails.catering || serviceDetails.sleeper || serviceDetails.vstp}
    <br />
{/if}

<style>
</style>
