export default function MenuBar({
  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>
  );
}