/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { useTranslations } from 'next-intl';

import { Control, useController } from 'react-hook-form';

import { Textarea } from '@/components/ui/textarea';

import { FieldWrapper } from './FieldWrapper';

interface TextareaFieldProps {
  control: Control<any>;
  name: string;
  label?: string;
  required?: boolean;
  helper?: string;
  maxLength?: number;
  rows?: number;
  placeholder?: string;
}

export function TextAreaField(props: TextareaFieldProps) {
  const t = useTranslations('common');

  const {
    field,
    fieldState: { error },
  } = useController({
    control: props.control,
    name: props.name,
  });

  const currentLength = field.value?.length || 0;

  return (
    <FieldWrapper
      label={props.label}
      required={props.required}
      helper={props.helper}
      error={error?.message}
    >
      <Textarea
        {...field}
        rows={props.rows || 4}
        maxLength={props.maxLength}
        placeholder={props.placeholder}
      />

      {props.maxLength && (
        <div className="text-right text-xs text-gray-400 mt-1">
          {currentLength} / {props.maxLength} {t('character')}
        </div>
      )}
    </FieldWrapper>
  );
}