'use client'

import { ChevronLeft, ChevronRight } from 'lucide-react'

export interface PaginationData {
  page: number
  limit: number
  total: number
  totalPages: number
}

interface PaginationProps {
  pagination: PaginationData
  onPageChange: (page: number) => void
  itemLabel?: string
}

export default function Pagination({ pagination, onPageChange, itemLabel = 'data' }: PaginationProps) {
  if (pagination.totalPages <= 1) return null

  return (
    <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
      <p className="text-sm text-gray-600 dark:text-gray-300">
        Halaman {pagination.page} dari {pagination.totalPages} ({pagination.total} {itemLabel})
      </p>
      <div className="flex items-center gap-2">
        <button
          onClick={() => onPageChange(pagination.page - 1)}
          disabled={pagination.page <= 1}
          className="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <ChevronLeft className="w-4 h-4" />
        </button>
        <span className="text-sm font-medium text-gray-700 dark:text-gray-200 min-w-[2rem] text-center">
          {pagination.page}
        </span>
        <button
          onClick={() => onPageChange(pagination.page + 1)}
          disabled={pagination.page >= pagination.totalPages}
          className="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <ChevronRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  )
}