/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import MDEditor from "@uiw/react-md-editor";
import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
import { cn } from "@repo/shared-components";

interface MarkdownEditorProps<T extends FieldValues> {
	name: Path<T>;
	form: UseFormReturn<any>;
	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>
	);
};