import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../constants/uiColors';
import { uiFonts } from '../constants/uiFonts';

interface PagerProps {
  totalItems: number;
  currentPage: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
}

export const Pager: React.FC<PagerProps> = ({
  totalItems,
  currentPage,
  itemsPerPage,
  onPageChange,
}) => {
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  return (
    <Container>
      <p>Total items: {totalItems}</p>
      <PagerContainer>
        <button
          disabled={currentPage === 1}
          onPointerDown={() => onPageChange(Math.max(currentPage - 1, 1))}
        >
          {'<'}
        </button>

        <div className="rpgui-container framed-grey">{currentPage}</div>

        <button
          disabled={currentPage === totalPages}
          onPointerDown={() =>
            onPageChange(Math.min(currentPage + 1, totalPages))
          }
        >
          {'>'}
        </button>
      </PagerContainer>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    margin: 0;
    font-size: ${uiFonts.size.xsmall};
  }
`;

const PagerContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;

  p {
    margin: 0;
  }

  div {
    color: white;
  }

  button {
    width: 40px;
    height: 40px;
    background-color: ${uiColors.darkGray};
    border: none;
    border-radius: 5px;
    color: white;

    :hover {
      background-color: ${uiColors.lightGray};
    }

    :disabled {
      opacity: 0.5;
    }

    &.active {
      background-color: ${uiColors.orange};
      font-weight: bold;
      color: black;
    }
  }
`;
