import { CreditCard, ExternalLink, Calendar, Clock } from 'lucide-react';
import { formatDate } from '@/lib/utils';
import { getStatusClass } from './OrderStatus'; // Будет импортировано из компонента OrderStatus

interface PaymentShippingProps {
  paymentMethod: string;
  status: string;
  trackingNumber?: string | null;
  createdAt: string;
  updatedAt?: string;
}

export function PaymentShipping({ 
  paymentMethod, 
  status, 
  trackingNumber, 
  createdAt, 
  updatedAt 
}: PaymentShippingProps) {
  // Получить строковое представление способа оплаты
  const getPaymentMethodLabel = (method: string) => {
    switch (method) {
      case 'credit_card':
        return 'Банковская карта';
      case 'bank_transfer':
        return 'Банковский перевод';
      case 'paypal':
        return 'PayPal';
      case 'cash_on_delivery':
        return 'Наличными при получении';
      default:
        return method;
    }
  };
  
  // Получить строковое представление статуса заказа
  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'pending':
        return 'Ожидает оплаты';
      case 'processing':
        return 'В обработке';
      case 'shipped':
        return 'Отправлен';
      case 'delivered':
        return 'Доставлен';
      case 'cancelled':
        return 'Отменен';
      case 'refunded':
        return 'Возвращен';
      default:
        return status;
    }
  };

  return (
    <div className="bg-gray-50 p-4 rounded-lg shadow-sm">
      <div className="flex items-center mb-3">
        <CreditCard className="h-5 w-5 text-indigo-500 mr-2" />
        <h3 className="text-sm font-medium text-gray-900">Оплата и доставка</h3>
      </div>
      <div className="text-sm text-gray-600 space-y-2">
        <p className="flex items-center">
          <span className="text-gray-500 mr-2">Способ оплаты:</span> 
          {getPaymentMethodLabel(paymentMethod || '')}
        </p>
        <p className="flex items-center">
          <span className="text-gray-500 mr-2">Статус:</span>
          <span className={`px-2 py-0.5 rounded-md text-xs font-medium ${getStatusClass(status)}`}>
            {getStatusLabel(status)}
          </span>
        </p>
        {trackingNumber ? (
          <p className="flex items-center">
            <span className="text-gray-500 mr-2">Трек-номер:</span>
            <span className="font-medium">{trackingNumber}</span>
            <a href="#" className="ml-2 text-indigo-600 hover:text-indigo-800">
              <ExternalLink className="h-3 w-3" />
            </a>
          </p>
        ) : (
          <p className="text-gray-400 italic">Трек-номер не присвоен</p>
        )}
        <div className="flex flex-col gap-1 mt-2">
          <div className="flex items-center">
            <Calendar className="h-4 w-4 text-gray-400 mr-2" />
            <p>
              <span className="text-gray-500">Создан:</span> {formatDate(createdAt)}
            </p>
          </div>
          {updatedAt && updatedAt !== createdAt && (
            <div className="flex items-center">
              <Clock className="h-4 w-4 text-gray-400 mr-2" />
              <p>
                <span className="text-gray-500">Обновлен:</span> {formatDate(updatedAt)}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
} 