import { useFormContext } from 'react-hook-form';
import { FieldError } from './FieldError';

type Props = {
  name: string;
  label: string;
  hint?: string;
  placeholder?: string;
  rows?: number;
  mono?: boolean;
};

export function TextAreaField({ name, label, hint, placeholder, rows = 4, mono = false }: Props) {
  const { register } = useFormContext();
  return (
    <label className="block">
      <span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
        {label}
      </span>
      {hint && (
        <span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
          {hint}
        </span>
      )}
      <textarea
        rows={rows}
        placeholder={placeholder}
        {...register(name)}
        className={`w-full bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm text-[color:var(--color-text)] transition-colors resize-y ${mono ? 'font-mono' : ''}`}
      />
      <FieldError name={name} />
    </label>
  );
}
