---
import { Icon } from "astro-icon/components";
import ShowProfileLogs from "./ProfileSection/ShowProfileLogs";
import { Stats } from "./ProfileSection/Stats";
---

<div id="" class="">
    <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 client:load />

    <!-- 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
                <div class="badge badge-ghost text-xs font-normal">
                    Real-time updates
                </div>
            </h3>
            <p class="text-sm opacity-70">
                Track your recent interactions with the IEEE UCSD platform
            </p>
            <div class="divider"></div>
            <div class="">
                <div class="min-h-[300px]">
                    <ShowProfileLogs client:load />
                </div>
            </div>
        </div>
    </div>
</div>