import React from 'react';
import { Form } from '@/components/ui/form';
import { Button } from '@/components/ui/button';
import { DialogClose, DialogFooter } from '@/components/ui/dialog';
import TransactionFormFields, { TransactionFormValues } from './TransactionFormFields';
import TransactionDeleteAlert from './TransactionDeleteAlert';
import { UseFormReturn } from 'react-hook-form';

interface TransactionEditFormProps {
  form: UseFormReturn<TransactionFormValues>;
  onSubmit: (values: TransactionFormValues) => void;
  onDelete: () => Promise<boolean>;
  isSubmitting: boolean;
}

/**
 * 트랜잭션 편집 폼 컴포넌트 - UI 부분만 분리
 */
const TransactionEditForm: React.FC<TransactionEditFormProps> = ({
  form,
  onSubmit,
  onDelete,
  isSubmitting
}) => {
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <TransactionFormFields form={form} />
        
        <DialogFooter className="flex justify-between gap-2 mt-6">
          <TransactionDeleteAlert onDelete={onDelete} />
          <div className="flex gap-2">
            <DialogClose asChild>
              <Button 
                type="button" 
                variant="outline"
                disabled={isSubmitting}
              >
                취소
              </Button>
            </DialogClose>
            <Button 
              type="submit"
              className="bg-neuro-income text-white hover:bg-neuro-income/90"
              disabled={isSubmitting}
            >
              {isSubmitting ? '저장 중...' : '저장'}
            </Button>
          </div>
        </DialogFooter>
      </form>
    </Form>
  );
};

export default TransactionEditForm;