import React from 'react';
import { FormField, Input } from '@wix/design-system';

export interface FieldNameInputProps {
  label: string;
  value: string;
  onChange: (v: string) => void;
  onBlur?: () => void;
  error?: string;
}

export const FieldNameInput = ({
  label,
  value,
  onChange,
  onBlur,
  error,
}: FieldNameInputProps) => (
  <FormField
    required
    stretchContent
    label={label}
    status={error ? 'error' : undefined}
    statusMessage={error}
  >
    <Input
      dataHook="cms-field-name-input"
      placeholder="Enter a name"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      onBlur={onBlur}
    />
  </FormField>
);