import { useState } from 'react';
import { useVendorAuditLog, useVendorTenants } from '../../api/vendor-hooks';
import { AuditLogTable } from '../../components/AuditLogTable';
import type { AuditLogFilters } from '../../types/api';

export function VendorAuditPage() {
  const [filters, setFilters] = useState<AuditLogFilters>({ page: 0, size: 25 });
  const { data, isLoading } = useVendorAuditLog(filters);
  const { data: tenants } = useVendorTenants();

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Audit Log</h1>
      <AuditLogTable
        data={data}
        isLoading={isLoading}
        filters={filters}
        onFiltersChange={setFilters}
        showTenantColumn
        showTenantFilter
        tenants={tenants}
      />
    </div>
  );
}
