<script lang="ts">
	import Bell from './ic/Bell.svelte';

	interface Props {
		count?: number;
		notifCount?: number;
		onNotifications?: () => void;
	}
	let { count = 0, notifCount = 0, onNotifications }: Props = $props();
</script>

<div class="topbar">
	<div class="brand">
		<img src="/icon-256.png" alt="InstaChef" width="38" height="38" class="logo" />
		<div>
			<div class="ic-display app-name">InstaChef</div>
			<div class="sub">
				<span class="dot ic-live"></span>
				LIVE · {count} RECIPES
			</div>
		</div>
	</div>
	<div class="actions">
		<button class="ic-btn-reset bell-btn" onclick={onNotifications} aria-label="Notifications">
			<Bell size={20} />
			{#if notifCount > 0}
				<span class="notif-dot"></span>
			{/if}
		</button>
	</div>
</div>

<style>
	.topbar {
		position: sticky;
		top: 0;
		z-index: 5;
		background: color-mix(in srgb, var(--bg) 92%, transparent);
		backdrop-filter: blur(14px) saturate(160%);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		padding: 60px 18px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--border);
	}
	.brand {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}
	.logo {
		border-radius: 11px;
		box-shadow: 0 2px 8px rgba(225, 48, 108, 0.25);
		flex-shrink: 0;
	}
	.app-name {
		font-size: 22px;
		color: var(--ink);
		line-height: 1;
		white-space: nowrap;
	}
	.sub {
		font-size: 10px;
		color: var(--muted);
		font-family: var(--font-mono);
		letter-spacing: 0.6px;
		margin-top: 3px;
		white-space: nowrap;
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.dot {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 99px;
		background: var(--status-success);
	}
	.actions {
		display: flex;
		gap: 4px;
	}
	.bell-btn {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--ink);
		position: relative;
	}
	.notif-dot {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 8px;
		height: 8px;
		border-radius: 99px;
		background: var(--pink);
		border: 2px solid var(--bg);
	}
</style>
