'use client';

import { forwardRef } from 'react';

interface FormFieldProps {
  type?: 'text' | 'textarea';
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  onKeyDown?: (e: React.KeyboardEvent) => void;
  onFocus?: () => void;
  rows?: number;
  autoFocus?: boolean;
}

export const FormField = forwardRef<
  HTMLInputElement | HTMLTextAreaElement,
  FormFieldProps
>(
  (
    {
      type = 'text',
      value,
      onChange,
      placeholder,
      disabled = false,
      className = '',
      onKeyDown,
      onFocus,
      rows = 2,
      autoFocus = false,
    },
    ref
  ) => {
    const baseClasses =
      'bg-transparent border-none outline-none font-mono placeholder-[var(--muted-foreground)]';

    if (type === 'textarea') {
      return (
        <textarea
          ref={ref as React.Ref<HTMLTextAreaElement>}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={onKeyDown}
          onFocus={onFocus}
          placeholder={placeholder}
          rows={rows}
          disabled={disabled}
          autoFocus={autoFocus}
          className={`${baseClasses} w-full text-xs text-[var(--muted-foreground)] resize-none ${className}`}
        />
      );
    }

    return (
      <input
        ref={ref as React.Ref<HTMLInputElement>}
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={onKeyDown}
        onFocus={onFocus}
        placeholder={placeholder}
        disabled={disabled}
        autoFocus={autoFocus}
        className={`${baseClasses} text-[var(--foreground)] text-sm font-medium leading-tight ${className}`}
      />
    );
  }
);

FormField.displayName = 'FormField';
