'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';

const RECENT_ORDERS = [
  {id: 'o1', code: '#LYT-9842', customer: 'Aarav Sharma', store: 'Indiranagar Flagship', amount: '₹2,450', method: 'UPI', status: 'completed', time: '2m ago'},
  {id: 'o2', code: '#LYT-9841', customer: 'Priya Patel', store: 'Koramangala 80ft', amount: '₹1,890', method: 'Credit Card', status: 'completed', time: '5m ago'},
  {id: 'o3', code: '#LYT-9840', customer: 'Rohan Mehta', store: 'Jayanagar 4th Block', amount: '₹3,120', method: 'Shopify', status: 'completed', time: '12m ago'},
  {id: 'o4', code: '#LYT-9839', customer: 'Ananya Roy', store: 'Whitefield Main', amount: '₹950', method: 'UPI', status: 'completed', time: '18m ago'},
  {id: 'o5', code: '#LYT-9838', customer: 'Kabir Verma', store: 'Indiranagar Flagship', amount: '₹4,200', method: 'Card', status: 'completed', time: '24m ago'},
];

export function CommerceRecentOrders() {
  return (
    <div className="rounded-xl border border-border bg-card p-4 space-y-3 shadow-sm">
      <div className="flex items-center justify-between border-b border-border pb-3">
        <div>
          <Heading level={4} className="text-base font-bold text-white flex items-center gap-2">
            <Icon icon={ICONS.purchases} size="sm" className="text-zinc-400" />
            Recent Orders
          </Heading>
          <Text size="sm" color="secondary">
            Real-time completed orders across your network
          </Text>
        </div>
        <Badge variant="success" label="Live Feed" />
      </div>

      <div className="divide-y divide-zinc-800/80">
        {RECENT_ORDERS.map((ord) => (
          <div key={ord.id} className="py-2.5 first:pt-0 last:pb-0 flex items-center justify-between text-sm">
            <div>
              <div className="font-bold text-white flex items-center gap-2">
                {ord.code}
                <span className="text-xs text-zinc-400 font-normal">• {ord.customer}</span>
              </div>
              <div className="text-xs text-zinc-400 font-medium">
                {ord.store} ({ord.method})
              </div>
            </div>
            <div className="text-right">
              <div className="font-bold text-white tabular-nums">{ord.amount}</div>
              <div className="text-xs text-zinc-400">{ord.time}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
