import React from 'react';
import { FormFieldProps } from 'react-compose-form';
import {
  FormFieldContext,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage
} from '@/components/ui/form';
import TiptapEditor from '@/components/tip-tap/editor/tiptap-editor';

export type TiptapFieldProps = FormFieldProps<{
  label?: string;
}>;

export const TiptapField: React.FC<TiptapFieldProps> = (props) => {
  const { label, name, value, onChange } = props;

  return (
    <FormFieldContext value={{ name: name as string }}>
      <FormItem>
        <FormLabel>{label}</FormLabel>

        <FormControl>
          <TiptapEditor
            className='min-h-[300px]'
            content={value}
            onChange={onChange}
          />
        </FormControl>

        <FormMessage />
      </FormItem>
    </FormFieldContext>
  );
};