
import React from 'react';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { FormControl } from '@/components/ui/form';
import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';

interface ExpenseCategorySelectorProps {
  value: string;
  onValueChange: (value: string) => void;
}

const ExpenseCategorySelector: React.FC<ExpenseCategorySelectorProps> = ({
  value,
  onValueChange
}) => {
  return (
    <FormControl>
      <ToggleGroup 
        type="single" 
        className="justify-start flex-wrap gap-2"
        value={value}
        onValueChange={(value) => {
          if (value) onValueChange(value);
        }}
      >
        {EXPENSE_CATEGORIES.map((category) => (
          <ToggleGroupItem 
            key={category} 
            value={category}
            className="px-4 py-2 rounded-md border flex items-center gap-2"
          >
            <div className="text-neuro-income">
              {categoryIcons[category]}
            </div>
            <span>{category}</span>
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
    </FormControl>
  );
};

export default ExpenseCategorySelector;
