
import React from 'react';
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
import { UseFormReturn } from 'react-hook-form';
import { TransactionFormValues } from './TransactionFormFields';
import { Separator } from '@/components/ui/separator';
import { CreditCard, Banknote } from 'lucide-react';

interface TransactionPaymentMethodProps {
  form: UseFormReturn<TransactionFormValues>;
  showPaymentMethod: boolean;
}

const TransactionPaymentMethod: React.FC<TransactionPaymentMethodProps> = ({ 
  form, 
  showPaymentMethod 
}) => {
  return (
    <div 
      className={`overflow-hidden transition-all duration-300 ease-out ${
        showPaymentMethod 
          ? 'max-h-36 opacity-100 translate-y-0' 
          : 'max-h-0 opacity-0 -translate-y-4'
      }`}
    >
      <Separator className="my-4" />
      
      <FormField
        control={form.control}
        name="paymentMethod"
        render={({ field }) => (
          <FormItem>
            <FormLabel>지출 방법</FormLabel>
            <FormControl>
              <div className="grid grid-cols-2 gap-3">
                <div
                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
                    field.value === '신용카드'
                      ? 'border-neuro-income bg-neuro-income/10'
                      : 'border-gray-200 hover:bg-gray-50'
                  }`}
                  onClick={() => form.setValue('paymentMethod', '신용카드')}
                >
                  <CreditCard size={16} className="text-neuro-income" />
                  <span className="text-xs">신용카드</span>
                </div>
                <div
                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
                    field.value === '현금'
                      ? 'border-neuro-income bg-neuro-income/10'
                      : 'border-gray-200 hover:bg-gray-50'
                  }`}
                  onClick={() => form.setValue('paymentMethod', '현금')}
                >
                  <Banknote size={16} className="text-neuro-income" />
                  <span className="text-xs">현금</span>
                </div>
              </div>
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );
};

export default TransactionPaymentMethod;
