/**
 * String Field Component
 *
 * Renders a text input with variable picker support.
 * Supports both single-line (string) and multi-line (text) modes.
 */

import { memo } from 'react';
import { Label } from '../ui/label';
import { VariableInput } from '../VariableInput';
import { ActionField } from '../../types/action';
import { AvailableContext } from '../../hooks/useAvailableContext';

interface StringFieldProps {
  fieldName: string;
  field: ActionField;
  value: string;
  onChange: (value: string) => void;
  availableContext: AvailableContext;
  error?: string;
}

export const StringField = memo(function StringField({
  fieldName,
  field,
  value,
  onChange,
  availableContext,
  error,
}: StringFieldProps) {
  return (
    <div className="space-y-2">
      <Label htmlFor={fieldName} className="text-slate-900">
        {field.label}
        {field.required && <span className="text-red-600 ml-1">*</span>}
      </Label>

      <VariableInput
        value={value}
        onChange={onChange}
        availableContext={availableContext}
        placeholder={field.placeholder || field.description}
        multiline={field.type === 'text'}
      />

      {field.description && (
        <p className="text-[12px] text-slate-400 leading-relaxed">{field.description}</p>
      )}

      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
});