"use client"

import { ListPageCard } from "@/app/dashboard/_components"
import { TrashTable } from "@/components/trash/components/trash-table"
import { useTrashList } from "@/components/trash/hooks/use-trash-list"
import type { TrashPageConfig } from "@/components/trash/types"

type TrashPageProps = {
  config: TrashPageConfig
}

export function TrashPage({ config }: TrashPageProps) {
  const basePath = config.listBasePath ?? "/dashboard/trash"
  const { data, isLoading, isRefreshing, refresh, removeLocal } =
    useTrashList(config.id, basePath)

  return (
    <ListPageCard
      icon={config.icon}
      title={config.pageHeading}
      description={config.description}
      breadcrumb={[
        {
          label: config.breadcrumbSection,
          href: `${basePath}/${config.id}`,
        },
        { label: "View all" },
      ]}
    >
      <TrashTable
        config={config}
        data={data}
        isLoading={isLoading}
        isRefreshing={isRefreshing}
        onRefresh={() => void refresh()}
        onRemove={removeLocal}
      />
    </ListPageCard>
  )
}