/* eslint-disable @typescript-eslint/no-explicit-any */
import { useCurrency } from "@/context/CurrencyContext";
import React from "react";

interface PreviewProps {
  fromCountry?: any;
  toCountry?: any;
  totalWeight: number;
  noOfPackages: number;
  totalValue: number;
}

const ShipmentPreview: React.FC<PreviewProps> = ({
  fromCountry,
  toCountry,
  totalWeight,
  noOfPackages,
  totalValue,
}) => {
    const { currencyName } = useCurrency();

  return (
    <div className="preview-card">
      <div className="preview-header">
        {fromCountry?.label || "From"} → {toCountry?.label || "To"}
      </div>

      <ul className="preview-list">
        <li>
          <span>Package Type</span>
          <strong>Parcel</strong>
        </li>
        <li>
          <span>No. of Package</span>
          <strong>{String(noOfPackages).padStart(2, "0")}</strong>
        </li>
        <li>
          <span>Total Weight</span>
          <strong>{totalWeight.toFixed(2)} KG</strong>
        </li>
        <li>
          <span>Order Value</span>
          <strong>{currencyName} {totalValue.toFixed(2)}</strong>
        </li>
        <li>
          <span>From Country</span>
          <strong>{fromCountry?.label || "-"}</strong>
        </li>
        <li>
          <span>To Country</span>
          <strong>{toCountry?.label || "-"}</strong>
        </li>
      </ul>

      <style jsx>{`
        .preview-card {
          background: #fff;
          border-radius: 14px;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
          overflow: hidden;
        }

        .preview-header {
          background: #f3f5ff;
          padding: 14px 18px;
          font-size: 14px;
          font-weight: 700;
          color: #001a72;
        }

        .preview-list {
          list-style: none;
          padding: 18px;
          margin: 0;
        }

        .preview-list li {
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          padding: 8px 0;
          border-bottom: 1px dashed #e5e7eb;
        }

        .preview-list li:last-child {
          border-bottom: none;
        }

        .preview-list span {
          color: #6b7280;
        }

        .preview-list strong {
          color: #111827;
          font-weight: 700;
        }
      `}</style>
    </div>
  );
};

export default ShipmentPreview;