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

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

interface StatusBreakdownCardProps {
  stats?: DashboardStats;
}

export default function StatusBreakdownCard({ stats }: StatusBreakdownCardProps) {
  const statuses = [
    { label: 'Pending', value: stats?.pendingOrders || 0, color: 'var(--status-pending)' },
    { label: 'Confirmed', value: stats?.confirmedOrders || 0, color: 'var(--status-confirmed)' },
    { label: 'Pending Review', value: stats?.pendingReviewOrders || 0, color: 'var(--status-pending-review)' },
    { label: 'Completed', value: stats?.completedOrders || 0, color: 'var(--status-completed)' },
    { label: 'Cancelled', value: stats?.cancelledOrders || 0, color: 'var(--status-cancelled)' }
  ];

  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">Order Status Breakdown</h3>
      <div className="space-y-3">
        {statuses.map((status) => (
          <div key={status.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: status.color }}></div>
              <span className="text-sm text-var-text-secondary">{status.label}</span>
            </div>
            <span className="text-sm font-semibold text-var-text">{status.value.toLocaleString()}</span>
          </div>
        ))}
      </div>
    </div>
  );
}