import {jsx}from'react/jsx-runtime';import {useLocation,useNavigate}from'@remix-run/react';const buttonsList = [{
  btnName: 'Guests',
  btnUrl: '/guests'
}, {
  btnName: 'Hosts',
  btnUrl: '/host'
}, {
  btnName: 'Neighbors',
  btnUrl: '/neighbors'
}, {
  btnName: 'Trust & safety',
  btnUrl: '/trust-saftey'
}];
function HelpPageButtons() {
  const location = useLocation();
  const navigate = useNavigate();
  const isActive = btnUrl => {
    if (location.pathname === '/help' && btnUrl === '/host') return true;
    return location.pathname === btnUrl;
  };
  return jsx("nav", {
    className: "border-b border-gray-200",
    "aria-label": "Help categories",
    children: jsx("div", {
      className: "flex flex-wrap gap-0",
      children: buttonsList.map(({
        btnName,
        btnUrl
      }) => {
        const active = isActive(btnUrl);
        return jsx("button", {
          type: "button",
          onClick: () => navigate(btnUrl),
          className: `px-4 py-3 text-sm font-medium uppercase tracking-wide transition-colors border-b-2 -mb-px cursor-pointer bg-transparent border-transparent ${active ? 'border-b-primary text-primary' : 'border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300'}`,
          children: btnName
        }, btnUrl);
      })
    })
  });
}export{HelpPageButtons as default};//# sourceMappingURL=HelpPageButtons.js.map
