import React, {FC} from 'react';

import {IPaginationButton} from '../../pagination.type';
import {PaginationStyle as S} from '../../pagination.style';
import ArrowLeft from 'herein-icon/arrow-left';
import ArrowRight from 'herein-icon/arrow-right';

export const PaginationButtonComponent: FC<IPaginationButton> = ({
    type,
    page,
    isSelected,
    nextButtonProps,
    previousButtonProps,
    countButtonProps,
    ...restProps
}) => {
    const selected = isSelected ? 'active' : '';

    if (type === 'next')
        return (
            <S.Button
                className={selected}
                style={{marginInlineStart: 'auto'}}
                color='gray'
                variant='text'
                {...restProps}
                {...nextButtonProps}
            >
                {nextButtonProps?.text || 'Next'}
                <ArrowRight className='icon rtl:rotate-180' />
            </S.Button>
        );

    if (type === 'previous')
        return (
            <S.Button
                className={selected}
                style={{marginInlineEnd: 'auto'}}
                color='gray'
                variant='text'
                {...restProps}
                {...previousButtonProps}
            >
                <ArrowLeft className='icon rtl:rotate-180' />
                {previousButtonProps?.text || 'Previous'}
            </S.Button>
        );

    if (type === 'start-ellipsis' || type === 'end-ellipsis')
        return <span>...</span>;

    return (
        <S.Button
            className={selected}
            color='gray'
            variant='text'
            {...restProps}
            {...countButtonProps}
        >
            {page}
        </S.Button>
    );
};