<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import BookingCreateModal from '$lib/components/admin/BookingCreateModal.svelte';

	let showCreateModal = false;
</script>

<div class="rounded-lg border border-gray-200 bg-white p-4">
	<h3 class="mb-2 text-sm font-semibold tracking-wide text-gray-600 uppercase">
		Call-In / Social Messaging Booking
	</h3>

	<p class="mb-4 text-sm text-gray-500">
		Create a booking and check timeslots for a discussed appointed
	</p>

	<div class="flex items-center gap-3">
		<Button onclick={() => (showCreateModal = true)}>Create Booking</Button>
	</div>
</div>

{#if showCreateModal}
	<BookingCreateModal bind:open={showCreateModal} />
{/if}
