import React from 'react';
import { formatCurrency } from '@/utils/formatters';
import { useIsMobile } from '@/hooks/use-mobile';
import { CATEGORY_DESCRIPTIONS } from '@/constants/categoryIcons';
import { getCategoryColor } from '@/utils/categoryColorUtils';

interface CategorySpending {
  title: string;
  current: number;
  total: number;
}

interface CategorySpendingListProps {
  categories: CategorySpending[];
  totalExpense: number;
  className?: string;
}

const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
  categories,
  totalExpense,
  className = ""
}) => {
  const isMobile = useIsMobile();
  
  return (
    <div className={`neuro-card mb-6 w-full ${className}`}>
      {categories.some(cat => cat.current > 0) ? (
        <div className="space-y-4 px-1 py-4">
          {categories.map((category) => {
            // 카테고리 이름을 직접 표시
            const categoryName = category.title;
            // 카테고리 설명 찾기
            const description = CATEGORY_DESCRIPTIONS[categoryName] || '';
            
            return (
              <div key={categoryName} className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-4 h-4 rounded-full" style={{
                    backgroundColor: getCategoryColor(categoryName) // 일관된 색상 적용
                  }}></div>
                  <span className="text-sm">
                    {categoryName}
                    {description && (
                      <span className="text-gray-500 text-xs ml-1">
                        {description}
                      </span>
                    )}
                  </span>
                </div>
                <div className="text-right">
                  <p className="font-medium text-sm">
                    {formatCurrency(category.current)}
                  </p>
                  {/* 퍼센트 표시 제거 */}
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="py-8 text-center text-gray-400">
          <p>아직 지출 내역이 없습니다</p>
        </div>
      )}
    </div>
  );
};

export default CategorySpendingList;