import { LeftToRightListNumberIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';

const NumberedItem = {
  type: 'numbered_item',
  label: 'Liste numérotée',
  icon: <LeftToRightListNumberIcon width={18} height={18} />,
  keywords: ['liste numerotee', 'numbered list', 'ordonnee', 'ordered', 'ol'],
  shortcut: '1. ',
  isText: true,
  textTag: 'li',
  textClassName: 'text-base leading-relaxed text-neutral-900 dark:text-white',
  placeholder: 'Élément numéroté',
  renderPrefix({ numberedIndex }) {
    const n = typeof numberedIndex === 'number' ? numberedIndex : 1;
    return (
      <span
        aria-hidden
        className="select-none mr-2 text-base leading-relaxed text-neutral-700 dark:text-neutral-300 flex-shrink-0 tabular-nums"
      >
        {n}.
      </span>
    );
  },
  create(init = {}) {
    return { id: newBlockId(), type: 'numbered_item', content: [], ...init };
  },
};

export default NumberedItem;
