'use client';

import type { ReactNode } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { GitBranch, LayoutDashboard, RefreshCw, Settings } from 'lucide-react';

import { cn } from '@spoon/ui';

const navItems = [
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/spoons', label: 'My Spoons', icon: GitBranch },
  { href: '/updates', label: 'Updates', icon: RefreshCw },
  { href: '/settings/profile', label: 'Settings', icon: Settings },
];

export const AppShell = ({ children }: { children: ReactNode }) => {
  const pathname = usePathname();
  return (
    <div className='bg-muted/20 flex-1 border-t'>
      <div className='container mx-auto grid gap-6 px-4 py-6 lg:grid-cols-[14rem_1fr]'>
        <aside className='lg:sticky lg:top-20 lg:self-start'>
          <nav className='border-border bg-card flex gap-1 overflow-x-auto border p-2 lg:flex-col'>
            {navItems.map(({ href, label, icon: Icon }) => {
              const active =
                pathname === href ||
                (href !== '/dashboard' && pathname.startsWith(href));
              return (
                <Link
                  key={href}
                  href={href}
                  className={cn(
                    'hover:bg-muted flex min-w-fit items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                    active
                      ? 'bg-primary/10 text-primary'
                      : 'text-muted-foreground hover:text-foreground',
                  )}
                >
                  <Icon className='size-4' />
                  {label}
                </Link>
              );
            })}
          </nav>
        </aside>
        <div className='min-w-0'>{children}</div>
      </div>
    </div>
  );
};
