import styles from "./styles.module.css";
import DiscountExpires from "@/components/pages/TrialPayment/components/DiscountExpires";
import CustomButton from "@/components/pages/TrialPayment/components/CustomButton";
import { useGenderInfo } from "../../lib/getGenderInfo";

interface ITrialPaymentHeaderProps {
  buttonText?: string;
  buttonClassName?: string;
  buttonClick: () => void;
}

function TrialPaymentHeader({
  buttonClick,
  buttonText = "get my reading",
  buttonClassName = "",
}: ITrialPaymentHeaderProps) {
  const genderInfo = useGenderInfo();
  return (
    <header className={styles.header}>
      <DiscountExpires />
      <CustomButton
        className={`${styles.button} ${buttonClassName}`}
        style={{
          backgroundColor: genderInfo?.colorAssociation,
        }}
        onClick={buttonClick}
      >
        {buttonText}
      </CustomButton>
    </header>
  );
}

export default TrialPaymentHeader;
