import { SliderLeftSVG, SliderRightSVG } from '@/Component/Common/SVGs/CommonSVG';

export const NextArrow = ({ className, onClick }: any) => {
    return (
        <div
            className={`${className} absolute right-0 bottom-0 z-10 top-auto cursor-pointer bg-white shadow-xl rounded-sm w-8 h-8 flex items-center justify-center hover:bg-lightGray transition !border border-darkGray transform-none`}
            onClick={onClick}
        >
            <SliderRightSVG />
        </div>
    );
};

export const PrevArrow = ({ className, onClick }: any) => {
    return (
        <div
            className={`${className} absolute right-10 left-auto bottom-0 z-10 top-auto cursor-pointer bg-white shadow-xl rounded-sm w-8 h-8 flex items-center justify-center hover:bg-lightGray transition !border border-darkGray transform-none`}
            onClick={onClick}
        >
            <SliderLeftSVG />
        </div>
    );
};