spoon/apps/next/src/app/(app)/settings/layout.tsx

'use client';

import type { ReactNode } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Brain, Github, Shield, User } from 'lucide-react';

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

const settingsItems = [
  { href: '/settings/profile', label: 'Profile', icon: User },
  { href: '/settings/integrations', label: 'Integrations', icon: Github },
  { href: '/settings/ai-providers', label: 'AI providers', icon: Brain },
  { href: '/settings/security', label: 'Security', icon: Shield },
];

const SettingsLayout = ({ children }: { children: ReactNode }) => {
  const pathname = usePathname();
  return (
    <main className='space-y-6'>
      <div className='flex flex-col justify-between gap-4 border-b pb-5 lg:flex-row lg:items-end'>
        <div>
          <h1 className='text-3xl font-semibold tracking-normal'>Settings</h1>
          <p className='text-muted-foreground mt-2'>
            Account, provider, AI, and security controls for this Spoon
            workspace.
          </p>
        </div>
      </div>
      <div className='grid gap-6 xl:grid-cols-[13rem_1fr]'>
        <nav className='border-border bg-card flex gap-1 overflow-x-auto border p-2 xl:flex-col xl:self-start'>
          {settingsItems.map(({ href, label, icon: Icon }) => (
            <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',
                pathname === href
                  ? 'bg-primary/10 text-primary'
                  : 'text-muted-foreground hover:text-foreground',
              )}
            >
              <Icon className='size-4' />
              {label}
            </Link>
          ))}
        </nav>
        <div className='min-w-0'>{children}</div>
      </div>
    </main>
  );
};

export default SettingsLayout;