import Link from 'next/link';
import { PropsWithChildren } from 'react';
import { Bell, Heart, Home, Inbox, PlusSquare, Search, Shield, Ticket, UserCircle2 } from 'lucide-react';

const nav = [
  { href: '/', label: 'Home', icon: Home },
  { href: '/browse', label: 'Browse', icon: Search },
  { href: '/sell', label: 'Sell', icon: PlusSquare },
  { href: '/favourites', label: 'Saved', icon: Heart },
  { href: '/inbox', label: 'Inbox', icon: Inbox },
  { href: '/orders', label: 'Orders', icon: Bell },
  { href: '/tickets', label: 'Support', icon: Ticket },
  { href: '/admin', label: 'Admin', icon: Shield },
  { href: '/profile/william', label: 'Profile', icon: UserCircle2 }
];

export function AppShell({ children }: PropsWithChildren) {
  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">♥</div>
          <div>
            <div className="brand-title">RE ADOREME</div>
            <div className="brand-subtitle">beta workspace</div>
          </div>
        </div>
        <nav className="sidebar-nav">
          {nav.map(({ href, label, icon: Icon }) => (
            <Link key={href} href={href} className="sidebar-link">
              <Icon size={18} />
              <span>{label}</span>
            </Link>
          ))}
        </nav>
      </aside>
      <main className="content-area">{children}</main>
    </div>
  );
}