import React, {FC} from 'react';

import {PaginationStyle as S} from './pagination.style';
import {IPagination} from './pagination.type';
import usePagination from '@mui/material/usePagination';
import {PaginationButtonComponent as Button} from './parts/button/pagination-button.component';

export const PaginationComponent: FC<IPagination> = (props) => {
    const {items} = usePagination(props.options || {});

    return (
        <S.Container>
            <S.Counts className={props?.countClassName}>
                {items.map((item, key) => (
                    <Button
                        key={key}
                        type={item.type}
                        page={item.page}
                        isSelected={item.selected}
                        onClick={item.onClick}
                        disabled={item.disabled}
                        countButtonProps={props.countButtonProps}
                        nextButtonProps={props.nextButtonProps}
                        previousButtonProps={props.previousButtonProps}
                    />
                ))}
            </S.Counts>
        </S.Container>
    );
};