import DevicesToPay from "@/components/devices-to-pay";
import { hasSession } from "@/lib/auth-guard";
import prisma from "@/lib/db";
import React from "react";

export default async function PaymentPage({
  params,
}: { params: Promise<{ paymentId: string }> }) {
  const paymentId = (await params).paymentId;
  const payment = await prisma.payment.findUnique({
    where: {
      id: paymentId,
    },
    include: {
      devices: true,
    },
  });
  await hasSession();
  const formula = await prisma.billFormula.findFirst();
  return (
    <div>
      <div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
        <h3>Payment</h3>
      </div>

      <div
        id="user-filters"
        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <DevicesToPay
          billFormula={formula ?? undefined}
          payment={payment || undefined}
        />
      </div>
    </div>
  );
}