import { Button } from "@/components/ui/button";
import Link from "next/link";

type NewBillingPageProps = {
  params: {
    app: string;
  };
};

export default function NewBillingPage({ params }: NewBillingPageProps) {
  const backHref = `/${params.app}/billings`;

  return (
    <div className="min-h-0 space-y-6 bg-[#F8F9FA] p-5 md:p-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-xl font-semibold leading-[1.35] text-[#45464E]">Create Billing</h1>
        <Button asChild variant="outline" className="h-9 rounded-lg border-[#F1F3F9] text-xs font-medium text-[#667085]">
          <Link href={backHref}>Back to Billing Report</Link>
        </Button>
      </div>
      <section className="rounded-xl border border-[#F1F3F9] bg-white p-6 shadow-[0_1px_2px_rgba(16,24,40,0.04)]">
        <p className="text-sm text-[#667085]">Billing details form can be added here when the create flow is ready.</p>
      </section>
    </div>
  );
}