WooNooW/admin-spa/src/routes/Orders/components/OrderCard.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronRight, Package } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { formatMoney } from '@/lib/currency';
import { formatRelativeOrDate } from '@/lib/dates';
import { Checkbox } from '@/components/ui/checkbox';

const statusStyle: Record<string, string> = {
  pending: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
  processing: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
  completed: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300',
  'on-hold': 'bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-300',
  cancelled: 'bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-300',
  refunded: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
  failed: 'bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300',
};

interface OrderCardProps {
  order: any;
  selected?: boolean;
  onSelect?: (id: number) => void;
  currencyConfig: any;
}

export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCardProps) {
  const statusClass = statusStyle[order.status?.toLowerCase()] || 'bg-slate-100 text-slate-800';
  
  return (
    <Link 
      to={`/orders/${order.id}`}
      className="block bg-card border border-border rounded-xl p-3 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
    >
      <div className="flex items-center gap-3">
        {/* Checkbox */}
        {onSelect && (
          <div 
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              onSelect(order.id);
            }}
          >
            <Checkbox
              checked={selected}
              aria-label={__('Select order')}
              className="w-5 h-5"
            />
          </div>
        )}

        <div className="flex flex-1 flex-col">
            {/* Icon - inline with first 2 lines */}
            <div className="flex items-center gap-2">
                <div className={`flex-shrink-0 p-2 rounded-xl flex items-center justify-center ${statusClass}`}>
                    {/* Line 2: Order Number (big) */}
                    <span className="font-bold text-lg leading-tight">#{order.number}</span>
                </div>

                <div className="flex flex-col">
                    {/* Line 1: Date (small) */}
                    <div className="text-xs text-muted-foreground leading-tight mb-0.5">
                        {formatRelativeOrDate(order.date_ts)}
                    </div>
                </div>
            </div>

            {/* Content - 2 lines inline with icon */}
            <div className="flex-1 min-w-0">
            {/* Line 3: Customer */}
            <div className="text-lg font-medium text-foreground mb-1">
                {order.customer || __('Guest')}
            </div>

            {/* Line 4: Items */}
            {order.items_brief && (
                <div className="text-sm text-muted-foreground truncate mb-2">
                {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief}
                </div>
            )}

            {/* Line 5: Total & Status */}
            <div className="flex items-center justify-between gap-2">
                <span className="font-bold text-base tabular-nums">
                {formatMoney(order.total, {
                    currency: order.currency || currencyConfig.currency,
                    symbol: order.currency_symbol || currencyConfig.symbol,
                    thousandSep: currencyConfig.thousand_sep,
                    decimalSep: currencyConfig.decimal_sep,
                    position: currencyConfig.position,
                    decimals: currencyConfig.decimals,
                })}
                </span>
            </div>
            </div>
        </div>


        {/* Chevron */}
        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
      </div>
    </Link>
  );
}