"use client";

import type { PaymentMethod } from "@/lib/saleor/payments/types";
import { PaymentMethodCard } from "./PaymentMethodCard";
import { useTranslations } from "next-intl";

interface PaymentMethodSelectorProps {
  methods: PaymentMethod[];
  selectedMethodId: string;
  onSelectMethod: (methodId: string) => void;
  locale: string;
  disabled?: boolean;
}

export function PaymentMethodSelector({
  methods,
  selectedMethodId,
  onSelectMethod,
  locale,
  disabled = false,
}: PaymentMethodSelectorProps) {
  const t = useTranslations("Payment");

  // Filter to only available methods
  const availableMethods = methods.filter((m) => m.available);

  if (availableMethods.length === 0) {
    return (
      <div className="rounded-lg border border-gray-200 p-4 text-center text-gray-500">
        {t("noMethodsAvailable")}
      </div>
    );
  }

  // If only one method, show it as selected but don't allow changing
  const isSingleMethod = availableMethods.length === 1;

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium">{t("title")}</h3>

      <div className="space-y-3">
        {availableMethods.map((method) => (
          <PaymentMethodCard
            key={method.id}
            method={method}
            isSelected={selectedMethodId === method.id}
            onSelect={() => onSelectMethod(method.id)}
            disabled={disabled || isSingleMethod}
            locale={locale}
          />
        ))}
      </div>

      {isSingleMethod && (
        <p className="text-sm text-gray-500">
          {t("singleMethodNotice")}
        </p>
      )}
    </div>
  );
}