'use client';
import React from 'react';
import { useTranslations } from 'next-intl';
import { useHistory } from '../lib/useHistory';
import { HistoryTable } from './historyTable';
import { Pagination } from './pagination';

// ─── Page Header ───────────────────────────────────────────────────────────────

const PageHeader: React.FC = () => {
  const t = useTranslations('HistoryPage');

  return (
    <div className="mb-6">
      <h1 className="text-2xl font-semibold text-slate-900 tracking-tight">
        {t('title')}
      </h1>
      <p className="mt-1 text-sm text-slate-500">{t('description')}</p>
    </div>
  );
};

// ─── HistoryPage ───────────────────────────────────────────────────────────────

export const HistoryPage = () => {
  const { items, status, error, refetch, currentPage, totalPages, goToPage } =
    useHistory();

  return (
    <div className=" px-4 py-10 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-6xl">
        <PageHeader />

        <HistoryTable
          items={items}
          isLoading={false}
          error={status === 'error' ? error : null}
          onRetry={refetch}
        />

        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={goToPage}
        />
      </div>
    </div>
  );
};