
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;
  showCard?: boolean; // 카드 표시 여부를 제어하는 프롭 추가
}

const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
  categories,
  totalExpense,
  className = "",
  showCard = true // 기본값은 true로 설정
}) => {
  const isMobile = useIsMobile();
  
  // 카테고리 목록을 렌더링하는 함수
  const renderCategoryList = () => {
    if (categories.some(cat => cat.current > 0)) {
      return (
        <div className="space-y-2 px-1 py-2">
          {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-2">
                  <div className="w-3 h-3 rounded-full" style={{
                    backgroundColor: getCategoryColor(categoryName) // 일관된 색상 적용
                  }}></div>
                  <span className="text-xs">
                    {categoryName}
                    {description && (
                      <span className="text-gray-500 text-xs ml-1">
                        {description}
                      </span>
                    )}
                  </span>
                </div>
                <div className="text-right">
                  <p className="font-medium text-xs">
                    {formatCurrency(category.current)}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      );
    } else {
      return (
        <div className="py-6 text-center text-gray-400">
          <p>아직 지출 내역이 없습니다</p>
        </div>
      );
    }
  };

  // showCard가 true이면 카드로 감싸서 반환, 아니면 목록만 반환
  if (showCard) {
    return (
      <div className={`neuro-card mb-6 w-full ${className}`}>
        {renderCategoryList()}
      </div>
    );
  }
  
  // 카드 없이 목록만 반환
  return renderCategoryList();
};

export default CategorySpendingList;
