<script lang="ts">
	import type { MemberWithDues } from '$lib/types/database';
	import CountryFlag from '$lib/components/ui/CountryFlag.svelte';

	interface Props {
		member: MemberWithDues;
	}

	let { member }: Props = $props();

	// Get greeting based on time of day
	function getGreeting(): string {
		const hour = new Date().getHours();
		if (hour < 12) return 'Good morning';
		if (hour < 18) return 'Good afternoon';
		return 'Good evening';
	}

	// Get status badge styling
	function getStatusBadge(status: string | null) {
		const styles: Record<string, { bg: string; text: string }> = {
			active: { bg: 'bg-green-100', text: 'text-green-700' },
			pending: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
			inactive: { bg: 'bg-gray-100', text: 'text-gray-700' },
			expired: { bg: 'bg-red-100', text: 'text-red-700' }
		};
		return styles[status || 'pending'] || styles.pending;
	}

	const statusStyle = getStatusBadge(member.status_name);
</script>

<div class="glass-card p-6">
	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<div class="flex items-center gap-4">
			<!-- Avatar -->
			{#if member.avatar_url}
				<img
					src={member.avatar_url}
					alt={`${member.first_name} ${member.last_name}`}
					class="h-16 w-16 rounded-full object-cover ring-4 ring-white shadow-md"
				/>
			{:else}
				<div
					class="flex h-16 w-16 items-center justify-center rounded-full bg-monaco-100 text-xl font-semibold text-monaco-700 ring-4 ring-white shadow-md"
				>
					{member.first_name[0]}{member.last_name[0]}
				</div>
			{/if}

			<div>
				<p class="text-sm text-slate-500">{getGreeting()},</p>
				<h2 class="text-xl font-semibold text-slate-900">
					{member.first_name}
					{member.last_name}
				</h2>
				<div class="mt-1 flex items-center gap-2">
					<span class="text-sm text-slate-500">{member.member_id}</span>
					<span class="text-slate-300">|</span>
					<span
						class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {statusStyle.bg} {statusStyle.text}"
					>
						{member.status_display_name || 'Pending'}
					</span>
				</div>
			</div>
		</div>

		<!-- Nationality flags -->
		{#if member.nationality && member.nationality.length > 0}
			<div class="flex items-center gap-2">
				{#each member.nationality as code}
					<CountryFlag {code} size="xl" />
				{/each}
			</div>
		{/if}
	</div>
</div>
