<script lang="ts">
	import type { SessionType } from './types';

	interface Props {
		isActive: boolean;
		sessionType: SessionType;
	}

	let { isActive, sessionType }: Props = $props();

	let iconColorClasses = $derived(
		isActive
			? sessionType === 'service'
				? 'bg-accent-500/10'
				: 'bg-secondary-500/10'
			: 'bg-surface-500/10'
	);

	let iconTextClasses = $derived(
		isActive
			? sessionType === 'service'
				? 'text-accent-600 dark:text-accent-400'
				: 'text-secondary-600 dark:text-secondary-400'
			: 'text-surface-600 dark:text-surface-400'
	);

	let title = $derived(isActive ? 'Active Session' : 'Completed Session');
</script>

<div class="mb-4 flex items-center gap-2">
	<div class="flex h-8 w-8 items-center justify-center rounded-lg {iconColorClasses}">
		{#if isActive}
			<svg
				class="h-5 w-5 {iconTextClasses}"
				style="fill: none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		{:else}
			<svg
				class="h-5 w-5 {iconTextClasses}"
				style="fill: none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		{/if}
	</div>
	<h2 class="text-lg font-semibold text-theme">{title}</h2>
	{#if isActive}
		<span class="relative flex h-3 w-3">
			<span
				class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
			></span>
			<span class="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
		</span>
	{/if}
</div>
