interface props {
  title: string;
  onClick: () => void;
  isSelected: boolean;
}

const CardBtn = ({ title, onClick, isSelected }: props) => {
  const buttonClass = isSelected
    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
    : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark text-gray-400 shadow-inner";

  const divClass = isSelected
    ? "flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg transform scale-110"
    : "flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg";

  return (
    <div className={divClass}>
      <button className={buttonClass} onClick={onClick}>
        {title}
      </button>
    </div>
  );
};

export default CardBtn;