import type React from "react";

import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";

interface AmountButtonProps {
	children: React.ReactNode;
	onClick: () => void;
}

export const AmountButton = ({ children, onClick }: AmountButtonProps) => {
	const theme = useTheme();

	return (
		<button
			type="button"
			className="bn-aeonik-font hover:bn-bg-accent-1 bn-border bn-border-solid bn-border-strong bn-px-1.5 bn-py-1 bn-cursor-pointer bn-text-secondary hover:bn-text-accent-1 bn-text-xs bn-font-medium bn-h-5 bn-flex bn-items-center bn-justify-center"
			onClick={onClick}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 15) }}
		>
			{children}
		</button>
	);
};
