"use client";

import { useTranslations } from "next-intl";
import Link from "next/link";
import { ArrowLeft, CreditCard } from "lucide-react";

export default function CollectionsPaymentsPage() {
  const t = useTranslations("collections");
  const tc = useTranslations("common");

  return (
    <div className="space-y-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold flex items-center gap-2">
            <CreditCard className="h-5 w-5" />
            {t("payments.title")}
          </h1>
          <p className="text-sm text-slate-600">{t("payments.subtitle")}</p>
        </div>

        <Link className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm" href="./cases">
          <ArrowLeft className="h-4 w-4" />
          {tc("back")}
        </Link>
      </div>

      <div className="rounded-xl border bg-white p-4">
        <div className="text-sm font-medium">{t("comingSoon.title")}</div>
        <p className="mt-1 text-sm text-slate-600">{t("comingSoon.body")}</p>
      </div>
    </div>
  );
}