'use client';

import ListPageTemplate from '@/components/common/ListPageTemplate';
import Pagination1 from '@/components/common/Pagination1';
import { useSearchParams } from 'next/navigation';

export default function DynamicListPageUI({ initialItems, basePath, columns, pageSize, totalItems }) {
  const searchParams = useSearchParams();
  const page = searchParams.get('page');
  const currentPage = Number(page) || 1;

  const listItems = initialItems.map(item => ({
    ...item,
    slug: item.slug,
    title: item.title,
    image: item.image || item.cover || item.img || '',
    additional_title: item.additional_title || '',
    subtitle: item.subtitle || item.content || '',
  }));

  const totalPages = Math.ceil((totalItems || 0) / pageSize);

  return (
    <>
      <ListPageTemplate items={listItems} basePath={basePath} columns={columns} />
      <div className="mt-8">
        <Pagination1
          currentPage={currentPage}
          totalPages={totalPages}
          basePath={basePath}
        />
      </div>
    </>
  );
}