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

import { LucideIcon } from 'lucide-react';

interface OrderTypeCardProps {
  title: string;
  count: number;
  revenue: number;
  icon: LucideIcon;
  color: 'blue' | 'purple' | 'orange';
}

const gradients = {
  blue: 'bg-var-primary',
  purple: 'bg-gradient-purple',
  orange: 'bg-gradient-orange'
};

export default function OrderTypeCard({ title, count, revenue, icon: Icon, color }: OrderTypeCardProps) {
  const formatRevenue = (value: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(value);
  };

  return (
    <div className={`${gradients[color]} rounded-xl shadow-var-card p-6 text-white`}>
      <div className="flex items-center justify-between mb-4">
        <Icon className="w-8 h-8 opacity-90" />
        <span className="text-xs font-medium bg-white/20 px-2 py-1 rounded-full">
          {title}
        </span>
      </div>
      <div>
        <p className="text-3xl font-bold">{count.toLocaleString()}</p>
        <p className="text-sm opacity-90 mt-1">Orders</p>
        <p className="text-xl font-semibold mt-3">{formatRevenue(revenue)}</p>
        <p className="text-xs opacity-75">Total Revenue</p>
      </div>
    </div>
  );
}