import { Bell, BookOpen, ChevronRight, Info, LogOut, Settings } from 'lucide-react';

interface Props {
  onNavigate: (page: string) => void;
}

interface Item {
  icon: React.ReactNode;
  label: string;
  sublabel?: string;
  page?: string;
  destructive?: boolean;
}

const ITEMS: Item[][] = [
  [
    { icon: <Settings className="w-5 h-5" />, label: 'Preferences', sublabel: 'General settings', page: 'general' },
    { icon: <Bell     className="w-5 h-5" />, label: 'Notifications' },
  ],
  [
    { icon: <BookOpen className="w-5 h-5" />, label: 'Documentation' },
    { icon: <Info     className="w-5 h-5" />, label: 'About Meatloaf', page: 'about-meatloaf' },
  ],
  [
    { icon: <LogOut   className="w-5 h-5" />, label: 'Log Out', destructive: true },
  ],
];

export default function ProfilePage({ onNavigate }: Props) {
  return (
    <div className="max-w-lg mx-auto py-8 px-4">
      <h1 className="text-2xl font-bold mb-6">Profile</h1>

      <div className="space-y-4">
        {ITEMS.map((group, gi) => (
          <div key={gi} className="rounded-xl overflow-hidden border border-neutral-200 divide-y divide-neutral-200">
            {group.map((item, ii) => (
              <button
                key={ii}
                onClick={() => item.page && onNavigate(item.page)}
                disabled={!item.page}
                className={`w-full flex items-center gap-3 px-4 py-3 text-left bg-white hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-default transition-colors ${item.destructive ? 'text-red-600' : 'text-neutral-900'}`}
              >
                <span className={item.destructive ? 'text-red-500' : 'text-neutral-500'}>
                  {item.icon}
                </span>
                <span className="flex-1 min-w-0">
                  <span className="block text-sm font-medium">{item.label}</span>
                  {item.sublabel && <span className="block text-xs text-neutral-400">{item.sublabel}</span>}
                </span>
                {item.page && <ChevronRight className="w-4 h-4 text-neutral-400 flex-shrink-0" />}
              </button>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}