"use client";

import { glassSurface } from "@/lib/styles/glassSurface";
import React from "react";

type Props = {
  children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>;

function MenuItemRendererComponent({ children, ...rest }: Props) {
  return (
    <div {...rest} className={glassSurface(rest.className, "pb-4! py-4 transition-all duration-200 ease-out w-full rounded-3xl px-4 flex items-center justify-between gap-4")}>
      {children}
    </div>
  );
}

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

export default MenuItemRenderer;
