// app/components/admin/dashboard/PaymentStatusCard.tsx
'use client';

import { DashboardStats } from '@/types/dashboard';

interface PaymentStatusCardProps {
  stats?: DashboardStats;
}

export default function PaymentStatusCard({ stats }: PaymentStatusCardProps) {
  const payments = [
    { label: 'Paid', value: stats?.paidOrders || 0, color: 'var(--status-paid)' },
    { label: 'Pending', value: stats?.pendingPayment || 0, color: 'var(--status-payment-pending)' },
    { label: 'Failed', value: stats?.failedPayments || 0, color: 'var(--status-failed)' },
    { label: 'Refunded', value: stats?.refundedOrders || 0, color: 'var(--status-refunded)' }
  ];

  return (
    <div className="bg-var-surface rounded-xl shadow-var-card border border-var-border p-6">
      <h3 className="text-lg font-semibold text-var-text mb-4">Payment Status Breakdown</h3>
      <div className="space-y-3">
        {payments.map((payment) => (
          <div key={payment.label} className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-2 h-2 rounded-full" style={{ backgroundColor: payment.color }}></div>
              <span className="text-sm text-var-text-secondary">{payment.label}</span>
            </div>
            <span className="text-sm font-semibold text-var-text">{payment.value.toLocaleString()}</span>
          </div>
        ))}
      </div>
    </div>
  );
}