import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

export function SettingsPage() {
  const { t } = useTranslation();

  const navItems = [
    { to: '/settings/profile', label: t('settings.profile'), icon: '\ud83d\udc64' },
    { to: '/settings/roles', label: t('settings.roles'), icon: '\ud83d\udd11' },
    { to: '/settings/users', label: t('settings.users'), icon: '\ud83d\udc65' },
    { to: '/settings/plugins', label: t('settings.plugins'), icon: '\ud83e\udde9' },
  ];

  return (
    <div className="flex max-w-7xl mx-auto" data-testid="settings-page">
      <aside className="w-64 flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)]">
        <h1 className="text-xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
        <nav className="space-y-1" role="navigation" aria-label={t('settings.title')}>
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) =>
                `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  isActive
                    ? 'bg-primary-100 text-primary-700'
                    : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'
                }`
              }
              data-testid={`settings-nav-${item.to.split('/').pop()}`}
            >
              <span aria-hidden="true">{item.icon}</span>
              {item.label}
            </NavLink>
          ))}
        </nav>
      </aside>
      <main className="flex-1 p-6" data-testid="settings-content">
        <Outlet />
      </main>
    </div>
  );
}