"use client";

import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
import React from "react";

interface NavigationButtonProps {
	direction: "left" | "right";
	disabled?: boolean;
	onClick: () => void;
}

const NavigationButton = React.memo(
	({ direction, disabled, onClick }: NavigationButtonProps) => {
		const Icon = direction === "left" ? RiArrowLeftSLine : RiArrowRightSLine;

		return (
			<button
				onClick={onClick}
				className="text-month-picker-foreground transition-all duration-200 cursor-pointer rounded-lg p-1 hover:bg-month-picker-foreground/10 focus:outline-hidden focus:ring-2 focus:ring-month-picker-foreground/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
				disabled={disabled}
				aria-label={`Navegar para o mês ${
					direction === "left" ? "anterior" : "seguinte"
				}`}
			>
				<Icon className="text-primary" size={18} />
			</button>
		);
	},
);

NavigationButton.displayName = "NavigationButton";

export default NavigationButton;
