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

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

const SettingsTabs = () => {
  const location = useLocation();

  return (
    <div className="w-full border-b border-border">
      <nav className="flex gap-1 overflow-x-auto pb-px -mb-px" aria-label="Settings tabs">
        {settingsItems.map((item) => {
          const Icon = item.icon;
          const isActive = location.pathname === item.path;

          return (
            <NavLink
              key={item.label}
              to={item.path}
              className={`
                flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap
                border-b-2 transition-all duration-200
                ${isActive
                  ? 'border-primary text-primary bg-primary/5'
                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
                }
              `}
            >
              <Icon className={`h-4 w-4 ${isActive ? 'text-primary' : ''}`} />
              <span>{item.label}</span>
            </NavLink>
          );
        })}
      </nav>
    </div>
  );
};

export default SettingsTabs;