import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default function PaginationLite({ currentPage, totalPages, onChange }: any) {
  const canGoPrev = currentPage > 1;
  const canGoNext = currentPage < totalPages;

  return (
    <View style={paginationStyles.container}>
      <Pressable
        disabled={!canGoPrev}
        onPress={() => onChange(currentPage - 1)}
        style={[paginationStyles.btn, !canGoPrev && paginationStyles.btnDisabled]}
      >
        <Ionicons name="chevron-back" size={20} color={canGoPrev ? '#6366F1' : '#D1D5DB'} />
      </Pressable>

      <View style={paginationStyles.indicator}>
        <Text style={paginationStyles.currentPage}>{currentPage}</Text>
        <Text style={paginationStyles.separator}>/</Text>
        <Text style={paginationStyles.totalPages}>{totalPages}</Text>
      </View>

      <Pressable
        disabled={!canGoNext}
        onPress={() => onChange(currentPage + 1)}
        style={[paginationStyles.btn, !canGoNext && paginationStyles.btnDisabled]}
      >
        <Ionicons name="chevron-forward" size={20} color={canGoNext ? '#6366F1' : '#D1D5DB'} />
      </Pressable>
    </View>
  );
}

const paginationStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
    paddingVertical: 20,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#F0F2F8',
  },
  btn: {
    width: 44,
    height: 44,
    borderRadius: 12,
    backgroundColor: '#F9FAFB',
    borderWidth: 1,
    borderColor: '#E5E7EB',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnDisabled: {
    backgroundColor: '#F3F4F6',
    borderColor: '#E5E7EB',
  },
  indicator: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#EEF2FF',
    borderRadius: 12,
  },
  currentPage: {
    fontSize: 18,
    fontWeight: '700',
    color: '#6366F1',
  },
  separator: {
    fontSize: 16,
    color: '#9CA3AF',
  },
  totalPages: {
    fontSize: 16,
    fontWeight: '600',
    color: '#6B7280',
  },
});