import React from 'react';

import MenuItem from '@/components/Page/Menu//MenuItem/';
import { useCurrentPath } from '@/hooks/useCurrentPath';

import styles from './MenuArea.module.css';

import { NavigationItem } from '@/lib/types/navigation';

interface MenuAreaProps {
  item: NavigationItem;
}

const MenuArea = React.memo(({ item }: MenuAreaProps) => {
  const hasBGImg = !!item.background;
  const { isCurrentPath } = useCurrentPath();

  const areaClasses = React.useMemo(() => {
    return [
      styles.area,
      styles[item.gridPosition],
      styles[item.variant],
      isCurrentPath(item.path) ? styles.current : '',
      item.background ? styles.hasBGImg : null,
    ]
      .filter(Boolean)
      .join(' ');
  }, [item.background, isCurrentPath]);

  return (
    <section className={areaClasses}>
      {hasBGImg && (
        <img
          className={styles.bgImg}
          src={item.background}
          alt={`Background Image for ${item.name}`}
        />
      )}
      <MenuItem item={item} />
    </section>
  );
});

MenuArea.displayName = 'MenuArea';

export default MenuArea;