import React from 'react';

import type { SlateRenderElementProps } from '@udecode/plate-common';

import { cn } from '@udecode/cn';

import { CheckboxStatic } from './checkbox-static';

export const TodoMarkerStatic = ({
  element,
}: Omit<SlateRenderElementProps, 'children'>) => {
  return (
    <div contentEditable={false}>
      <CheckboxStatic
        className='pointer-events-none absolute -left-6 top-1'
        checked={element.checked as boolean}
      />
    </div>
  );
};

export const TodoLiStatic = ({
  children,
  element,
}: SlateRenderElementProps) => {
  return (
    <span
      className={cn(
        (element.checked as boolean) && 'text-zinc-500 line-through dark:text-zinc-400'
      )}
    >
      {children}
    </span>
  );
};