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

import { forwardRef } from '../utils/react';
import { Separator, SeparatorProps } from '../separator';
import * as css from './menu-separator.css';

/*-- Types --*/

export interface MenuSeparatorProps extends SeparatorProps {}

/*-- Main --*/

export const MenuSeparator = forwardRef<'hr', MenuSeparatorProps>(
  function MenuSeparator({ className, ...rest }, ref) {
    const cn = clsx(className, css.separator);

    return <Separator ref={ref} className={cn} {...rest} />;
  },
);