import { useRef } from 'react';

import { IconClearFormatting } from '@tabler/icons-react';

import ActionButton from '../components/ActionButton';
import { useTextArea } from '../context';

const ClearFormat = ({ title }: { title: string }) => {
  const anchorRef = useRef(null);
  const { editor } = useTextArea();

  if (!editor) {
    return null;
  }
  return (
    <ActionButton
      title={title}
      icon={<IconClearFormatting />}
      onClick={() => editor.chain().focus().clearNodes().unsetAllMarks().run()}
      isActive={false}
      ref={anchorRef}
    />
  );
};

export default ClearFormat;