import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './menu-item.css';

/*-- Types --*/

export interface MenuItemProps extends css.ItemVariants {}

/*-- Main --*/

export const MenuItem = forwardRef<'li', MenuItemProps>(function MenuItem(
  { as = 'li', children, className, active, ...rest },
  ref,
) {
  const cn = clsx(className, css.item({ active }));

  return (
    <Box ref={ref} as={as} className={cn} {...rest}>
      {children}
    </Box>
  );
});