"use client";

import { PaymentMethodsManagement } from "@/components/billing/payment-methods-management";
import { useUserBillingProfile } from "@/components/billing/hooks";
import { useLocaleFunction } from "@/hooks/use-localed";

export function PaymentMethods() {
  const { data, refetch } = useUserBillingProfile();
  const t = useLocaleFunction();

  return (
    <section className="space-y-6 p-4 rounded-lg bg-card border">
      <h2 className="text-lg font-semibold">{t("payment.payment-methods")}</h2>
      <PaymentMethodsManagement
        methods={data?.stripe_payment_methods}
        onUpdate={() => refetch()}
      />
    </section>
  );
}