import { ReactNode } from 'react';

import { cn } from '@/lib/helper';
import { Size } from '@/types/theme';

interface MenuProps {
  children?: ReactNode;
  size?: Size;
  direction?: 'vertical' | 'horizontal';
  className?: string;
}

const Menu = ({
  children,
  size = 'md',
  direction = 'vertical',
  className,
}: MenuProps) => {
  const menuBaseClassName = cn('menu w-full', {
    'menu-xs': size === 'xs',
    'menu-sm': size === 'sm',
    'menu-md': size === 'md',
    'menu-lg': size === 'lg',
    'menu-xl': size === 'xl',
    'menu-vertical': direction === 'vertical',
    'menu-horizontal': direction === 'horizontal',
  });

  return <ul className={cn(menuBaseClassName, className)}>{children}</ul>;
};

export default Menu;