import React from 'react';
import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { UseFormReturn } from 'react-hook-form';
import { TransactionFormValues } from './TransactionFormFields';
import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
import { categoryIcons } from '@/constants/categoryIcons';

interface TransactionCategorySelectorProps {
  form: UseFormReturn<TransactionFormValues>;
}

const TransactionCategorySelector: React.FC<TransactionCategorySelectorProps> = ({ form }) => {
  return (
    <FormField
      control={form.control}
      name="category"
      render={({ field }) => (
        <FormItem>
          <FormLabel>카테고리</FormLabel>
          <div className="grid grid-cols-4 gap-2">
            {EXPENSE_CATEGORIES.map((category) => (
              <div
                key={category}
                className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
                  field.value === category 
                    ? 'border-neuro-income bg-neuro-income/10' 
                    : 'border-gray-200'
                }`}
                onClick={() => form.setValue('category', category as any)}
              >
                <div className="p-1 rounded-full">
                  {categoryIcons[category]}
                </div>
                <span>{category}</span>
              </div>
            ))}
          </div>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default TransactionCategorySelector;