'use client';
import MDEditor from '@uiw/react-md-editor';
import {
  FieldValues,
  Path,
  RegisterOptions,
  UseFormReturn,
} from 'react-hook-form';
import { cn } from '../../../helper/cn';

interface MarkdownEditorProps<T extends FieldValues> {
  name: Path<T>;
  form: UseFormReturn<T>;
  formOptions?: RegisterOptions<T>;
  label?: string;
  placeholder?: string;
  className?: string;
}

export const MarkdownEditor = <T extends FieldValues>({
  name,
  label = name,
  placeholder = label,
  form,
  className,
}: MarkdownEditorProps<T>) => {
  return (
    <label className="floating-label w-full mt-5">
      <span className="text-lg flex items-center gap-2">{label}</span>
      <div className={cn('border rounded-lg p-2 w-full', className)}>
        <MDEditor
          value={form.watch(name)}
          onChange={(value) =>
            form.setValue(name, value as any, { shouldValidate: true })
          }
          textareaProps={{ placeholder }}
        />
      </div>
      {form.formState.errors[name] && (
        <p className="text-error">
          {form.formState.errors[name].message as string}
        </p>
      )}
    </label>
  );
};