import { NavLink, Outlet, useParams } from 'react-router-dom';

const tabs = [
  { label: 'Members', path: 'members' },
  { label: 'Teams', path: 'teams' },
  { label: 'Invitations', path: 'invitations' },
  { label: 'General', path: 'general' },
];

export function OrgSettingsLayout() {
  const { orgSlug: orgId } = useParams<{ orgSlug: string }>();

  return (
    <div className="max-w-5xl mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Organization Settings</h1>

      <div className="flex border-b border-gray-200 mb-6 gap-1">
        {tabs.map((tab) => (
          <NavLink
            key={tab.path}
            to={`/org/${orgId}/settings/${tab.path}`}
            className={({ isActive }) =>
              `px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
                isActive
                  ? 'border-indigo-600 text-indigo-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`
            }
          >
            {tab.label}
          </NavLink>
        ))}
      </div>

      <Outlet />
    </div>
  );
}
