'use client';
import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
import { Home, Settings, Bell } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';

const menuItems = [
    { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
    { label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') },
    { label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') },
];

export default function Dashboard() {
    return (
        <div className="flex min-h-screen bg-background">
            {/* Navigation Rail - Material Design 3 */}
            <aside className="w-20 bg-card/50 flex flex-col items-center py-4 gap-4">
                {/* Avatar with large M3 container */}
                <div className="mb-2">
                    <Avatar className="size-14 rounded-2xl">
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback className="rounded-2xl">CN</AvatarFallback>
                    </Avatar>
                </div>

                <MenuDock
                    items={menuItems}
                    orientation="vertical"
                    showIndicator={false}
                    showLabels={true}
                    variant="compact"
                />
            </aside>

            {/* Main Content Area */}
            <main className="flex-1 p-6 bg-background">
                <div className="max-w-7xl mx-auto space-y-6">
                    <h1 className="text-3xl font-bold">Dashboard</h1>

                    {/* Material Design 3 Cards Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {/* Filled Card */}
                        <div className="bg-card p-6 rounded-3xl shadow-sm">
                            <h3 className="text-lg font-semibold mb-2">Filled Card</h3>
                            <p className="text-muted-foreground text-sm">
                                Material Design 3 filled container with large rounded corners.
                            </p>
                        </div>

                        {/* Elevated Card */}
                        <div className="bg-card p-6 rounded-3xl shadow-lg hover:shadow-xl transition-shadow">
                            <h3 className="text-lg font-semibold mb-2">Elevated Card</h3>
                            <p className="text-muted-foreground text-sm">
                                Elevated surface with prominent shadow for hierarchy.
                            </p>
                        </div>

                        {/* Outlined Card */}
                        <div className="bg-background border-2 border-border p-6 rounded-3xl">
                            <h3 className="text-lg font-semibold mb-2">Outlined Card</h3>
                            <p className="text-muted-foreground text-sm">
                                Outlined container with subtle border emphasis.
                            </p>
                        </div>
                    </div>

                    {/* Example Section with M3 styling */}
                    <div className="bg-card/30 p-6 rounded-3xl">
                        <h2 className="text-xl font-semibold mb-4">Surface Container</h2>
                        <p className="text-muted-foreground">
                            Material Design 3 emphasizes larger border radius (rounded-3xl) and layered surfaces.
                        </p>
                    </div>
                </div>
            </main>
        </div>
    );
}

