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 className="text-sm">{category}</span>
              </div>)}
          </div>
          <FormMessage />
        </FormItem>} />;
};
export default TransactionCategorySelector;