'use client'

import { TipTapEditor } from '../components/TipTapEditor.js'

export interface RichTextFieldProps {
  label: string
  value?: string
  onChange: (value: string) => void
  required?: boolean
  helpText?: string
}

export function RichTextField({
  label,
  value = '',
  onChange,
  required,
  helpText,
}: RichTextFieldProps) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium">
        {label}
        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
      </label>
      <TipTapEditor content={value} onChange={onChange} />
      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
    </div>
  )
}
