<script lang="ts">
	import { page } from '$app/state';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';

	interface Props {
		exporting?: boolean;
		onclick: () => void;
		showHeader?: boolean;
		showMobileFab?: boolean;
	}

	let { exporting = false, onclick, showHeader = true, showMobileFab = true }: Props = $props();
</script>

{#if page.data.pakaiLaporanPdf}
	{#if showHeader}
	<button
		type="button"
		class="btn-outline-on-dark hidden gap-1.5 lg:flex"
		disabled={exporting}
		{onclick}
	>
		{#if exporting}
			<span class="loading loading-spinner loading-xs"></span>
		{:else}
			<OutlineIcon name="file" size="xs" />
			Export PDF
		{/if}
	</button>
	{/if}

	{#if showMobileFab}
		<div class="fixed bottom-20 right-4 z-40 lg:hidden">
			<button
				type="button"
				class="btn-fab-outline btn-fab-outline-indigo"
				disabled={exporting}
				{onclick}
				aria-label="Export PDF"
			>
				{#if exporting}
					<span class="loading loading-spinner loading-sm"></span>
				{:else}
					<OutlineIcon name="file" size="md" />
				{/if}
			</button>
		</div>
	{/if}
{:else if showHeader}
	<a href="/langganan" class="btn-outline-on-dark hidden gap-1.5 lg:flex">
		<OutlineIcon name="paket" size="xs" />
		Upgrade PDF
	</a>
{/if}
