"use client";
import { useState } from "react";
import DashboardLayout from "@/components/DashboardLayout";
import SettleableRidesTable from "@/components/settlements/SettleableRidesTable";
import SettlementsTable from "@/components/settlements/SettlementsTable";

export default function SettlementsPage() {
  const [settlementsRefreshKey, setSettlementsRefreshKey] = useState(0);
  const [profitRate, setProfitRate] = useState<number | string | null>(null);

  return (
    <DashboardLayout title="التسويات" subtitle="إدارة التسويات ومتابعة الأرباح المحولة">
      <div className="max-w-6xl mx-auto space-y-6">
        <SettleableRidesTable
          onProfitRateChange={setProfitRate}
          onSettlementRequested={() =>
            setSettlementsRefreshKey((current) => current + 1)
          }
        />
        <SettlementsTable
          refreshKey={settlementsRefreshKey}
          profitRate={profitRate}
        />
      </div>
    </DashboardLayout>
  );
}