import { useNavigate } from "react-router-dom";
import { Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useBoardAssociations } from "@/contexts/BoardAssociationContext";
import BillApprovalsPage from "@/pages/BillApprovalsPage";

export default function BoardBillApprovalsPage() {
  const { associationIds, loading } = useBoardAssociations();
  const navigate = useNavigate();

  if (loading) {
    return (
      <div className="flex justify-center py-12">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button onClick={() => navigate("/homeowner/board/submit-invoice")} className="gap-2">
          <Sparkles className="h-4 w-4" /> Submit Invoice
        </Button>
      </div>
      <BillApprovalsPage boardAssociationIds={associationIds} />
    </div>
  );
}
