<script lang="ts">
	import { User, Calendar, CreditCard, FileText, Users, Settings } from 'lucide-svelte';
	import type { MemberRole } from '$lib/types/database';

	interface Props {
		role: MemberRole;
	}

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

	const isBoard = role === 'board' || role === 'admin';
	const isAdmin = role === 'admin';

	interface QuickAction {
		href: string;
		label: string;
		description: string;
		icon: typeof User;
		color: string;
	}

	const memberActions: QuickAction[] = [
		{
			href: '/profile',
			label: 'Edit Profile',
			description: 'Update your information',
			icon: User,
			color: 'bg-blue-100 text-blue-600'
		},
		{
			href: '/events',
			label: 'Browse Events',
			description: 'Find upcoming events',
			icon: Calendar,
			color: 'bg-green-100 text-green-600'
		},
		{
			href: '/payments',
			label: 'View Payments',
			description: 'Check payment history',
			icon: CreditCard,
			color: 'bg-purple-100 text-purple-600'
		},
		{
			href: '/documents',
			label: 'Documents',
			description: 'Access resources',
			icon: FileText,
			color: 'bg-orange-100 text-orange-600'
		}
	];

	const boardActions: QuickAction[] = [
		{
			href: '/board/members',
			label: 'Manage Members',
			description: 'View member directory',
			icon: Users,
			color: 'bg-indigo-100 text-indigo-600'
		}
	];

	const adminActions: QuickAction[] = [
		{
			href: '/admin/settings',
			label: 'Settings',
			description: 'Configure system',
			icon: Settings,
			color: 'bg-slate-100 text-slate-600'
		}
	];

	let actions = $derived([
		...memberActions,
		...(isBoard ? boardActions : []),
		...(isAdmin ? adminActions : [])
	]);
</script>

<div class="glass-card p-6">
	<h3 class="mb-4 text-base font-semibold text-slate-900">Quick Actions</h3>

	<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
		{#each actions.slice(0, 4) as action}
			<a
				href={action.href}
				class="flex flex-col items-center rounded-xl border border-slate-100 p-4 text-center transition-all hover:border-slate-200 hover:shadow-sm"
			>
				<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full {action.color}">
					<svelte:component this={action.icon} class="h-5 w-5" />
				</div>
				<span class="text-sm font-medium text-slate-900">{action.label}</span>
				<span class="mt-0.5 text-xs text-slate-500">{action.description}</span>
			</a>
		{/each}
	</div>
</div>
