import React from 'react';
import { formatCurrency } from '@/utils/formatters';
import { useIsMobile } from '@/hooks/use-mobile';

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();
  
  // 카테고리별 색상 매핑
  const getCategoryColor = (title: string) => {
    switch (title) {
      case '식비': return '#81c784';
      case '생활비': return '#AED581';
      case '교통비': return '#2E7D32';
      default: return '#4CAF50';
    }
  };

  return (
    <div className={`neuro-card mb-6 w-full ${className}`}>
      {categories.some(cat => cat.current > 0) ? (
        <div className="space-y-4">
          {categories.map((category) => (
            <div key={category.title} className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-6 h-6 rounded-full" style={{
                  backgroundColor: getCategoryColor(category.title)
                }}></div>
                <span>{category.title}</span>
              </div>
              <div className="text-right">
                <p className="font-medium">
                  {formatCurrency(category.current)}
                </p>
                <p className="text-xs text-gray-500">
                  {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%
                </p>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="py-8 text-center text-gray-400">
          <p>아직 지출 내역이 없습니다</p>
        </div>
      )}
    </div>
  );
};

export default CategorySpendingList;