import React from "react";

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  pageSize: number;
  totalCount: number;
  itemLabel?: string;
  onPageChange?: (page: number) => void;
}

function buildPagesAscending(current: number, total: number): number[] {
  const maxPagesToShow = 6;
  const pagesToShow = Math.min(total, maxPagesToShow);

  const arr: number[] = [];
  for (let i = 1; i <= pagesToShow; i++) {
    arr.push(i);
  }
  return arr;
}

export default function Pagination({ currentPage, totalPages, pageSize, totalCount, itemLabel = 'عقار', onPageChange }: PaginationProps) {
  const pages = buildPagesAscending(currentPage, totalPages);

  const start = (currentPage - 1) * pageSize + 1;
  const end = Math.min(currentPage * pageSize, totalCount);

  const fmt = (n: number) => n.toLocaleString("en-US");

  const chevronIcon = (
    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0.699951 10.7L5.69995 5.69995L0.699951 0.699951" stroke="#05222D" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );

  return (
    <div className="mt-8 flex flex-col gap-3 md:flex-row-reverse md:items-center md:justify-between rounded-2xl bg-[#F1F5F9] px-4 py-3">
      <div className="text-sm text-gray-600">{`${fmt(start)} - ${fmt(end)} من ${fmt(totalCount)} ${itemLabel}`}</div>

      <div className="flex items-center gap-2">
        {/* Next on the left (mirrored for RTL visual) - design only */}
        <button
          type="button"
          aria-label="التالي"
          disabled
          className="w-9 h-9 rounded-full border flex items-center justify-center bg-[#0525311A] cursor-default"
        >
          <span className="inline-block">
            {chevronIcon}
          </span>
        </button>

        {pages.map((p) => (
          <button
            type="button"
            key={p}
            onClick={() => onPageChange?.(p)}
            className={`w-9 h-9 rounded-full text-sm flex items-center justify-center cursor-pointer text-[#05222D] ${p === currentPage
                ? "bg-[#0B2230] text-white"
                : "bg-[#0525311A]"
              }`}
          >
            {p}
          </button>
        ))}

        {/* Prev on the right (mirrored for RTL visual) - design only */}
        <button
          type="button"
          aria-label="السابق"
          disabled
          className="w-9 h-9 rounded-full border flex items-center justify-center bg-[#0525311A] cursor-default"
        >
          <span className="inline-block rotate-180">
            {chevronIcon}
          </span>
        </button>
      </div>
    </div>
  );
}