import React from 'react';
import { NavLink } from 'react-router-dom';
import { CreditCard, Shield, Settings, Star } from 'lucide-react';

const settingsItems = [
  { label: 'Stripe Integration', path: '/admin/settings/stripe', icon: CreditCard },
  { label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
  { label: 'Member Tiers', path: '/admin/settings/member-tiers', icon: Star },
];

const SettingsSidebar = () => {
  return (
    <aside className="w-full lg:w-64 shrink-0 bg-background border border-[var(--neutral-800)] rounded-2xl p-4 lg:sticky lg:top-8 h-max">
      <div className="flex items-center gap-2 px-2 pb-3 border-b border-[var(--neutral-800)]">
        <Settings className="h-4 w-4 text-[var(--purple-ink)]" />
        <span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Settings
        </span>
      </div>
      <nav className="mt-3 space-y-1">
        {settingsItems.map((item) => {
          const Icon = item.icon;
          return (
            <NavLink
              key={item.label}
              to={item.path}
              className={({ isActive }) =>
                [
                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-[var(--orange-light)]/10 text-[var(--purple-ink)]'
                    : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/10',
                ].join(' ')
              }
            >
              <Icon className="h-4 w-4" />
              <span>{item.label}</span>
            </NavLink>
          );
        })}
      </nav>
    </aside>
  );
};

export default SettingsSidebar;