---
import { Icon } from "astro-icon/components";
---

<div id="profileSection" class="dashboard-section">
    <div class="mb-6">
        <h2 class="text-2xl font-bold">Dashboard Overview</h2>
        <p class="opacity-70">Welcome to your IEEE UCSD dashboard</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div
            class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
        >
            <div class="stat">
                <div class="stat-title font-medium opacity-80">
                    Events Attended
                </div>
                <div class="stat-value text-primary" id="eventsAttendedValue">
                    0
                </div>
                <div class="stat-desc flex items-center gap-2 mt-1">
                    <div class="badge badge-primary badge-sm">
                        Since joining
                    </div>
                </div>
            </div>
        </div>
        <div
            class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-secondary transition-all duration-300 hover:-translate-y-1 transform"
        >
            <div class="stat">
                <div class="stat-title font-medium opacity-80">
                    Loyalty Points
                </div>
                <div class="stat-value text-secondary" id="loyaltyPointsValue">
                    0
                </div>
                <div class="stat-desc flex items-center gap-2 mt-1">
                    <div
                        class="badge badge-secondary badge-sm"
                        id="loyaltyPointsChange"
                    >
                        No activity
                    </div>
                </div>
            </div>
        </div>
        <div
            class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-accent transition-all duration-300 hover:-translate-y-1 transform"
        >
            <div class="stat">
                <div class="stat-title font-medium opacity-80">
                    Activity Level
                </div>
                <div class="stat-value text-accent" id="activityLevelValue">
                    Low
                </div>
                <div class="stat-desc flex items-center gap-2 mt-1">
                    <div
                        class="badge badge-accent badge-sm"
                        id="activityLevelDesc"
                    >
                        New Member
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Content -->
    <div
        class="card bg-base-100 shadow-lg border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
    >
        <div class="card-body">
            <h3 class="card-title text-xl font-bold flex items-center gap-3">
                <div class="badge badge-primary p-3">
                    <Icon name="heroicons:eye" class="h-5 w-5" />
                </div>
                Recent Activity
            </h3>
            <div class="divider"></div>
            <div class="py-4">
                <p class="text-base-content/70 flex items-center gap-2">
                    <Icon
                        name="heroicons:question-mark-circle"
                        class="h-5 w-5 opacity-50"
                    />
                    No recent activity to display.
                </p>
            </div>
        </div>
    </div>
</div>