"use client";

import cx from "classnames";
import React from "react";
import { useStatic } from "../../utils/hooks";
import { Link } from "../Link";
import AnchorNavigationStatic from "./AnchorNavigation.static";

interface AnchorNavigationItem {
  label: string;
  href: string;
  isActive?: boolean;
}

interface AnchorNavigationProps {
  items: AnchorNavigationItem[];
  className?: string;
  children?: React.ReactNode;
}

const CLASS_ROOT = "anchor-navigation";

const AnchorNavigation = ({
  items,
  className,
  children,
  ...other
}: AnchorNavigationProps) => {
  const classes = cx(CLASS_ROOT, className);

  const [anchorNavRef] = useStatic(AnchorNavigationStatic);

  return (
    <nav
      className={classes}
      ref={anchorNavRef}
      data-anchor-navigation
      aria-label="Sekcie stránky"
      {...other}
    >
      <div className={`${CLASS_ROOT}__content`}>
        <ul
          className={cx(
            "list-inline horizontal-scroll mb-none",
            `${CLASS_ROOT}__content-left`,
          )}
        >
          {items.map((item) => (
            <li key={item.href}>
              <Link
                href={item.href}
                className={cx(`${CLASS_ROOT}__item`, {
                  "is-active": item.isActive,
                })}
              >
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
        {children && (
          <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
        )}
      </div>
    </nav>
  );
};

AnchorNavigation.displayName = "AnchorNavigation";

export { AnchorNavigation };