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

interface ExpensePaymentMethodProps {
  form: UseFormReturn<ExpenseFormValues>;
  showPaymentMethod: boolean;
  isDisabled?: boolean;
}

const ExpensePaymentMethod: React.FC<ExpensePaymentMethodProps> = ({ 
  form, 
  showPaymentMethod,
  isDisabled = false
}) => {
  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-2" />
      
      <FormField
        control={form.control}
        name="paymentMethod"
        render={({ field }) => (
          <FormItem>
            <FormLabel>지출 방법</FormLabel>
            <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'
                } ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
                onClick={() => !isDisabled && 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'
                } ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
                onClick={() => !isDisabled && form.setValue('paymentMethod', '현금')}
              >
                <Banknote size={16} className="text-neuro-income" />
                <span className="text-xs">현금</span>
              </div>
            </div>
          </FormItem>
        )}
      />
    </div>
  );
};

export default ExpensePaymentMethod;
