'use client';

import React from 'react';

type Props = {
  children: React.ReactNode;
  variant?: 'list' | 'grid';
} & React.HTMLAttributes<HTMLDivElement>;

function MenuItemRendererComponent({ children, variant = 'list', ...rest }: Props) {
  const isGrid = variant === 'grid';
  return (
    <div
      {...rest}
      className={`${rest.className} box-shadow-normal transition-all duration-200 ease-out w-full bg-container rounded-3xl ${
        isGrid
          ? 'p-3 flex flex-col'
          : 'relative py-4 pb-4! px-4 flex items-stretch overflow-visible'
      }`}
    >
      {children}
    </div>
  );
}

// Memoize with shallow comparison of props
const MenuItemRenderer = React.memo(MenuItemRendererComponent, (prevProps, nextProps) => {
  return (
    prevProps.className === nextProps.className &&
    prevProps.children === nextProps.children &&
    prevProps.variant === nextProps.variant
  );
});

export default MenuItemRenderer;
