<script lang="ts">
    import type { SvelteComponent } from "svelte";

    export let icon: typeof SvelteComponent | undefined = undefined;

    export let title: string = "Sleeping battery life";
    export let desc: string = "Calculates the battery life depending on sleep and non-sleep power usage.";
    export let btnText: string = "To calculator";
    export let btnHref: string = "/tools/battery-life-calculator";
</script>

<div class="min-w-10 min-h-10 bg-base-100 rounded-lg">
    <div class="p-4">
        <div class="flex">
            <div class="font-bold text-xl">{title}</div>
            
        </div>
        <div class="text-sm">{desc}</div>

        <div class="flex pt-4">
            {#if icon != undefined}
            <svelte:component this={icon}/>
            {/if}
            <a href="{btnHref}" class="btn ml-auto btn-primary btn-sm">{btnText}</a>
        </div>
    </div>
</div>