import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Order } from '../types';

const STATUS_COLORS: Record<string, string> = {
  pending:          '#f59e0b',
  confirmed:        '#3b82f6',
  out_for_delivery: '#8b5cf6',
  delivered:        '#22c55e',
  cancelled:        '#ef4444',
};

interface Props {
  order: Order;
}

export default function OrderCard({ order }: Props) {
  const color = STATUS_COLORS[order.status] ?? '#94a3b8';
  return (
    <View style={styles.card}>
      <View style={styles.top}>
        <Text style={styles.id}>Order #{order.id.slice(-8).toUpperCase()}</Text>
        <View style={[styles.badge, { backgroundColor: color + '22' }]}>
          <Text style={[styles.badgeText, { color }]}>
            {order.status.replace(/_/g, ' ').toUpperCase()}
          </Text>
        </View>
      </View>
      <Text style={styles.meta}>
        {order.fulfillment === 'delivery' ? '🚚 Delivery' : '🏪 Pickup'} · 💵 Cash on Delivery
      </Text>
      <Text style={styles.total}>₦{Number(order.total).toLocaleString()}</Text>
      <Text style={styles.date}>📅 {new Date(order.created_at).toLocaleDateString()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card:      { backgroundColor: '#1e293b', borderRadius: 12, padding: 16, marginBottom: 10 },
  top:       { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
  id:        { color: '#fff', fontWeight: '700' },
  badge:     { borderRadius: 6, paddingHorizontal: 8, paddingVertical: 2 },
  badgeText: { fontSize: 10, fontWeight: '700' },
  meta:      { color: '#94a3b8', fontSize: 12, marginBottom: 4 },
  total:     { color: '#f97316', fontWeight: '800', fontSize: 15 },
  date:      { color: '#475569', fontSize: 11, marginTop: 2 },
});
