import React from 'react';
import styled from 'styled-components';

const DynamoPagination = ({
							  pagination,
							  onNextPage,
							  onPrevPage,
							  className
						  }) => {
	return (
		<PaginationButtons className={className}>
			<PaginationButton
				onClick={onPrevPage}
				disabled={pagination.currentPage === 1}
			>
				이전
			</PaginationButton>
			<PageInfo>{pagination.currentPage}</PageInfo>
			<PaginationButton
				onClick={onNextPage}
				disabled={!pagination.hasNextPage}
			>
				다음
			</PaginationButton>
		</PaginationButtons>
	);
};

const PaginationButtons = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;

const PaginationButton = styled.button`
  background-color: ${props => props.disabled ? '#e0e0e0' : '#6c7eb7'};
  color: ${props => props.disabled ? '#a0a0a0' : 'white'};
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
  transition: background-color 0.2s;

  &:hover {
    background-color: ${props => props.disabled ? '#e0e0e0' : '#5a6a9b'};
  }
`;

const PageInfo = styled.div`
  font-size: 12px;
  font-weight: 500;
  color: #666;
`;

export default DynamoPagination;