import React, { memo } from "react";

const MenuBar = memo(
  ({ children, className = "", size = "default", ...props }) => {
    const sizeStyles = {
      xsmall:
        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
      default:
        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
      medium:
        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",
      large:
        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
    };

    const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;

    return (
      <nav
        className={baseStyles}
        role="menubar"
        aria-label="Main navigation menu"
        {...props}
      >
        {children}
      </nav>
    );
  }
);

MenuBar.displayName = "MenuBar";

export default MenuBar;