
import React from 'react';
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { UseFormReturn } from 'react-hook-form';
import { TransactionFormValues, formatWithCommas } from './TransactionFormFields';

interface TransactionAmountInputProps {
  form: UseFormReturn<TransactionFormValues>;
  onFocus: () => void;
}

const TransactionAmountInput: React.FC<TransactionAmountInputProps> = ({ form, onFocus }) => {
  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formattedValue = formatWithCommas(e.target.value);
    form.setValue('amount', formattedValue);
  };

  return (
    <FormField
      control={form.control}
      name="amount"
      render={({ field }) => (
        <FormItem>
          <FormLabel>금액</FormLabel>
          <FormControl>
            <Input 
              placeholder="금액을 입력하세요" 
              {...field} 
              onChange={handleAmountChange}
              onFocus={onFocus}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default TransactionAmountInput;
