<script setup>
import NotificationsWidget from '@/components/dashboard/NotificationsWidget.vue';
</script>

<template>
	<div class="card mb-0">
		<div class="flex justify-between mb-4">
			<div>
				<span class="text-primary font-medium">Área</span>
				<span class="text-muted-color"> do Editor</span>
			</div>
			<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
				<i class="pi pi-pencil text-orange-500 text-xl!"></i>
			</div>
		</div>
		<p class="text-muted-color text-sm mt-0">
			Crie e gerencie cursos, módulos e conteúdos da plataforma de microlearning.
		</p>
	</div>

	<div class="grid grid-cols-12 gap-8">
		<!-- Estatísticas de conteúdo -->
		<div class="col-span-12">
			<div class="card">
				<div class="flex items-center gap-3 mb-4">
					<i class="pi pi-book text-orange-500 text-2xl"></i>
					<span class="font-semibold text-lg">Conteúdo da Plataforma</span>
				</div>
				<div class="grid grid-cols-12 gap-4">
					<div class="col-span-12 md:col-span-4">
						<div class="surface-100 dark:surface-700 rounded-xl p-4 text-center">
							<div class="text-3xl font-bold text-orange-500 mb-1">0</div>
							<div class="text-muted-color text-sm">Cursos publicados</div>
						</div>
					</div>
					<div class="col-span-12 md:col-span-4">
						<div class="surface-100 dark:surface-700 rounded-xl p-4 text-center">
							<div class="text-3xl font-bold text-orange-500 mb-1">0</div>
							<div class="text-muted-color text-sm">Módulos criados</div>
						</div>
					</div>
					<div class="col-span-12 md:col-span-4">
						<div class="surface-100 dark:surface-700 rounded-xl p-4 text-center">
							<div class="text-3xl font-bold text-orange-500 mb-1">0</div>
							<div class="text-muted-color text-sm">Alunos inscritos</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-span-12 xl:col-span-6">
			<NotificationsWidget />
		</div>
	</div>
</template>
