Menu

import {
  Truck,
  Star,
  Home,
  Eye,
  Heart,
  Settings,
  LogOut,
  User,
} from 'lucide-react';
import { UserProfileSidebar } from '@/components/ui/menu'; // Adjust the import path

export default function UserProfileSidebarDemo() {
  const user = {
    name: 'Emma',
    email: '[email protected]',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/bc/bc55f88ce6b77d2bed85230412d90f73e6998cceae2398aa3a20f46efe0546dd.jpg',
  };

  const navItems = [
    {
      label: 'My orders',
      href: '#orders',
      icon: <Truck className="h-full w-full" />,
    },
    {
      label: 'Reviews',
      href: '#reviews',
      icon: <Star className="h-full w-full" />,
    },
    {
      label: 'Delivery addresses',
      href: '#addresses',
      icon: <Home className="h-full w-full" />,
    },
    {
      label: 'Recently viewed',
      href: '#viewed',
      icon: <Eye className="h-full w-full" />,
    },
    {
      label: 'Favorite items',
      href: '#favorites',
      icon: <Heart className="h-full w-full" />,
    },
    {
      label: 'Settings',
      href: '#settings',
      icon: <Settings className="h-full w-full" />,
      isSeparator: true, // This adds space before the settings item
    },
  ];
  
  const logoutItem = {
    label: 'Log out',
    icon: <LogOut className="h-full w-full" />,
    onClick: () => alert('Logging out...'),
  };

  return (
    <div className="flex h-[600px] w-full items-center justify-center bg-background p-10">
      <UserProfileSidebar user={user} navItems={navItems} logoutItem={logoutItem} />
    </div>
  );
}