import type { ReactNode } from 'react';
import React from 'react';

import { Menu } from '@shoptet/ui-core-web';
import type { SafePick } from '@shoptet/utils';

import type { DataListItemProps } from '../DataList/DataListItem';
import { getDatalistItemProps } from '../DataList/DataListItem';
import { DataListItemCell } from '../DataList/DataListItemCell';

export interface MenuItemProps extends SafePick<DataListItemProps, 'dense' | 'gap' | 'disabled'> {
  children?: ReactNode;
  onAction?: () => void;
  destructive?: boolean;
}

export const MenuItem = Object.assign(
  function MenuItem({ children, disabled, dense, gap, onAction, destructive, ...rest }: MenuItemProps) {
    rest satisfies Record<PropertyKey, never>;
    const dataListItemProps = getDatalistItemProps({
      divider: false,
      dense,
      gap,
      disabled,
      className: destructive ? 'dataList__item--destructive' : undefined,
    });

    return (
      <Menu.Item onAction={onAction} disabled={disabled}>
        <div {...dataListItemProps}>{children}</div>
      </Menu.Item>
    );
  },
  {
    Cell: DataListItemCell,
  }
);