import PropTypes from 'prop-types';
import { motion } from 'motion/react';
import clsx from 'clsx';

function Button({text, onClick, disabled}) {
    return (
        <motion.button 
            whileHover={!disabled && { scale: 1.05 }}
            whileTap={!disabled && { scale: 0.95 }}
            className={clsx("px-12 py-2 text-lg text-white dark:text-primary-dark rounded-full bg-primary dark:bg-secondary-dark", disabled && "bg-[#cccccc] dark:bg-[#cccccc]")}
            onClick={onClick}
            disabled={disabled}
        >
            {text}
        </motion.button>
    )
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
    disabled: PropTypes.bool,
};

export default Button;