import type { ColumnDef } from "@tanstack/react-table"
import { fetchCashOutList } from "@/api/cashOut"
import DataTable from "@/components/data-table"
import Page from "@/components/page"
import { useList } from "@/lib/hooks/useList"
import type { CashOutItem } from "@/lib/models/cashOut"

const columns: ColumnDef<CashOutItem>[] = [
  {
    accessorKey: "username",
    header: "用户",
  },
  {
    accessorKey: "money",
    header: "提现金额",
    cell: ({ row }) => `¥${row.original.money}`,
  },
  {
    accessorKey: "apply_reason",
    header: "提现理由",
    cell: ({ row }) => row.original.apply_reason || "--",
  },
  {
    accessorKey: "alipay_account",
    header: "支付宝账号",
  },
  {
    accessorKey: "remark",
    header: "备注",
    cell: ({ row }) => row.original.remark || "--",
  },
  {
    accessorKey: "status",
    header: "状态",
  },
  {
    accessorKey: "create_time",
    header: "提现时间",
  },
]

export default function CashOutPage() {
  const { data, status } = useList(fetchCashOutList)

  return (
    <Page>
      <div className="bg-white rounded-lg p-4">
        <h3 className="font-semibold text-lg">提现管理</h3>
        <DataTable<CashOutItem>
          data={data}
          status={status}
          columns={columns}
          pagination={{
            page: 0,
            size: 10,
            total: data.length,
          }}
        />
      </div>
    </Page>
  )
}