import { getRefundPolicyTiers } from "@/lib/refund-policy";

/**
 * Display kebijakan refund default di trip detail. Sumber tier:
 * lib/refund-policy.ts. Compact agar tidak mendominasi page.
 */
export function RefundPolicySection() {
  const tiers = getRefundPolicyTiers();
  return (
    <details className="rounded-xl border border-neutral-200 bg-neutral-50/60 p-3 text-xs sm:text-sm">
      <summary className="cursor-pointer select-none font-semibold text-neutral-700">
        🛟 Kebijakan refund saat peserta cancel
      </summary>
      <div className="mt-2 space-y-2 text-neutral-600">
        <p className="text-[11px] text-neutral-500 sm:text-xs">
          Kebijakan ini berlaku saat <strong>peserta</strong> cancel booking
          yang sudah lunas. Kalau <strong>organizer</strong> membatalkan trip,
          peserta yang sudah bayar selalu dapat refund 100%.
        </p>
        <ul className="space-y-1">
          {tiers.map((t) => (
            <li key={t.minDaysBefore} className="flex items-baseline gap-2">
              <span
                className={`inline-flex min-w-[3rem] justify-center rounded-full px-2 py-0.5 text-[10px] font-bold ${
                  t.refundPercentage >= 80
                    ? "bg-primary-100 text-primary-700"
                    : t.refundPercentage >= 50
                      ? "bg-amber-100 text-amber-700"
                      : "bg-red-100 text-red-700"
                }`}
              >
                {t.refundPercentage}%
              </span>
              <span>{t.label}</span>
            </li>
          ))}
        </ul>
        <p className="text-[11px] text-neutral-500 sm:text-xs">
          Refund diproses manual oleh admin SeTrip — perlu 1–3 hari kerja
          setelah disetujui untuk uang masuk ke rekening kamu.
        </p>
      </div>
    </details>
  );
}