"use client";

import { Package } from "lucide-react";

import { ListPageCard } from "@/app/dashboard/_components";
import { useClearFiltersRefresh } from "@/app/dashboard/_components/data-table";
import { ErrorBanner } from "@/components/shared/error-banner";

import { LIST_HREF } from "./constants";
import { AssetDefinitionTable } from "./asset-definition-table";
import { AssetDefinitionHeaderActions } from "./list-header-actions";
import type { AssetDefinitionRow } from "./schema";

type Props = {
  rows: AssetDefinitionRow[];
  filters: {
    masterName: string;
    status: string;
  };
  totalCount: number;
  page: number;
  pageSize: number;
  pageCount: number;
  errorMessage?: string | null;
};

export function AssetDefinitionPageClient({
  rows,
  filters,
  totalCount,
  page,
  pageSize,
  pageCount,
  errorMessage = null,
}: Props) {
  const { resetKey, isRefreshing, onRefresh } = useClearFiltersRefresh({
    clearToHref: LIST_HREF,
  });

  return (
    <ListPageCard
      icon={Package}
      title="Asset Definition"
      description="Catalog of asset type definitions and related titles."
      breadcrumb={[{ label: "Master Table" }, { label: "Asset Definition" }]}
      actions={
        <AssetDefinitionHeaderActions isRefreshing={isRefreshing} onRefresh={onRefresh} />
      }
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <AssetDefinitionTable
        key={resetKey}
        data={rows}
        filters={filters}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
      />
    </ListPageCard>
  );
}