import { Link, useLocation, useNavigate } from 'react-router-dom';

const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
  const location = useLocation();
  const navigate = useNavigate();

  const tabs = [
    { to: '/', label: 'Konfiguration' },
    { to: '/store-watch', label: 'Betriebs-Monitoring' }
  ];
  if (isAdmin) {
    tabs.push({ to: '/admin', label: 'Admin' });
  }

  const handleClick = (event, to) => {
    event.preventDefault();
    if (to === location.pathname) {
      return;
    }
    const label = tabs.find((tab) => tab.to === to)?.label || '';
    const proceed = () => navigate(to);
    if (onProtectedNavigate) {
      onProtectedNavigate(`zur Seite "${label}" zu wechseln`, proceed);
      return;
    }
    proceed();
  };

  return (
    <nav className="mb-4 flex gap-2" aria-label="Navigation">
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.to;
        return (
          <Link
            key={tab.to}
            to={tab.to}
            onClick={(event) => handleClick(event, tab.to)}
            className={`px-4 py-2 rounded-md border transition-colors ${
              isActive
                ? 'bg-blue-500 text-white border-blue-600'
                : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400'
            }`}
          >
            {tab.label}
          </Link>
        );
      })}
    </nav>
  );
};

export default NavigationTabs;