"use client";

import { useGroupsContext } from "@/hooks/groups-context";
import EntriesPanel from "@/components/entries-panel";
import BucketsPanel from "@/components/buckets-panel";
import { EntryMutationProvider } from "@/hooks/entry-mutation-context";


export default function DashboardContent() {
    const { groups, activeGroupId, loading } = useGroupsContext();
    const activeGroup = groups.find((group) => group.id === activeGroupId) ?? null;

    if (loading) {
        return (
            <div className="space-y-4">
                <div className="panel panel-accent p-4">
                    <div className="space-y-3 animate-pulse">
                        <div className="h-4 w-40 rounded bg-surface" />
                        <div className="h-3 w-64 rounded bg-surface" />
                        <div className="h-3 w-52 rounded bg-surface" />
                    </div>
                </div>
            </div>
        );
    }

    if (!activeGroup) {
        return (
            <div className="space-y-4">
                <div className="panel panel-accent p-4 text-sm text-muted">
                    Create or join a group to add entries.
                </div>
            </div>
        );
    }

    return (
        <EntryMutationProvider>
            <div className="space-y-4">
                <BucketsPanel />
                <EntriesPanel />
            </div>
        </EntryMutationProvider>
    );
}