import { Card } from "@/components/ui/Card";
import { getMyBookings } from "@/lib/api";
import { formatPrice } from "@/lib/utils";
import { getTranslations, setRequestLocale } from "next-intl/server";

export default async function CabinetInvoicesPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("cabinet");
  const bookings = await getMyBookings();

  return (
    <div>
      <h2 className="mb-4 text-xl font-semibold">{t("invoices")}</h2>
      {bookings.length === 0 ? (
        <p className="text-[var(--text-muted)]">{t("emptyInvoices")}</p>
      ) : (
        <div className="space-y-3">
          {bookings.map((b) => (
            <Card key={b.id} className="flex items-center justify-between gap-4">
              <div>
                <p className="font-semibold">{b.serviceTitle}</p>
                <p className="text-sm text-[var(--text-muted)]">{b.datetime}</p>
              </div>
              <div className="text-right">
                <p className="font-bold text-[var(--brand-700)]">{formatPrice(b.price, locale)}</p>
                <p className="text-xs text-[var(--neutral-500)]">{b.paid ? t("paid") : t("unpaid")}</p>
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}