/**
 * @file PickupCodeCard.jsx
 * @description Блок «Ваш код выдачи» в карточке доставки клиента (самовывоз):
 *   крупный код, который клиент называет вслух, и под ним штрих-код с тем же кодом —
 *   чтобы на складе можно было не набирать код руками, а отсканировать с телефона.
 *   Разметка одна на оба места страницы (сохранённый выбор и вкладка «Самовывоз»),
 *   иначе блоки разъезжаются.
 */
import React from "react";

import { PickupCodeBarcode } from "./PickupCodeBarcode";

export const PickupCodeCard = ({ invitation, deliveryNumberDigits, className = "" }) => {
  const code = invitation?.pickupCode || invitation?.pickup_code;
  if (!code) return null;

  return (
    <div
      className={[
        "rounded-2xl border-2 border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-4 text-center",
        className,
      ].join(" ").trim()}
    >
      {deliveryNumberDigits ? (
        <p className="text-sm font-semibold text-[var(--color-text)]">Ваш номер доставки {deliveryNumberDigits}</p>
      ) : null}
      <p className="mt-2 text-xs uppercase tracking-[0.2em] text-[var(--color-text-muted)]">Ваш код выдачи</p>
      <p className="mt-1 text-3xl font-bold tracking-[0.4em] text-[var(--color-accent)]">{code}</p>
      <PickupCodeBarcode value={code} showText={false} className="mx-auto mt-3 w-full max-w-[320px]" />
      <p className="mt-2 text-xs text-[var(--color-text-muted)]">
        Покажите код при получении заказа или дайте отсканировать штрих-код
      </p>
    </div>
  );
};