"use client";

import { PaymentMethodSelector, CODInstructions } from "@/components/payment";
import { getPaymentMethodsForChannel } from "@/lib/config/paymentMethods";
import type { PaymentMethod } from "@/lib/saleor/payments/types";
import { useTranslations } from "next-intl";

interface PaymentSectionProps {
  selectedMethodId: string;
  onSelectMethod: (methodId: string) => void;
  locale: string;
  channel?: string;
  disabled?: boolean;
}

export function PaymentSection({
  selectedMethodId,
  onSelectMethod,
  locale,
  channel = "default-channel",
  disabled = false,
}: PaymentSectionProps) {
  const t = useTranslations("Payment");

  // Get available payment methods for this channel
  const paymentMethods: PaymentMethod[] = getPaymentMethodsForChannel(channel);

  // Get the selected method details
  const selectedMethod = paymentMethods.find((m) => m.id === selectedMethodId);

  return (
    <section className="border-t border-gray-200 pt-6">
      <PaymentMethodSelector
        methods={paymentMethods}
        selectedMethodId={selectedMethodId}
        onSelectMethod={onSelectMethod}
        locale={locale}
        disabled={disabled}
      />

      {/* COD instructions can be shown here if needed */}
      {selectedMethod?.id === "cod" && (
        <CODInstructions />
      )}
    </section>
  );
}