import CustomButton from "../CustomButton";
import DiscountExpires from "../DiscountExpires";
import styles from "./styles.module.css";

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

function Header({
  buttonClick,
  buttonText = "get my reading",
  buttonClassName = "",
}: IHeaderProps) {
  // const { gender } = useSelector(selectors.selectQuestionnaire);
  return (
    <header
      className={styles.header}
      style={{
        // backgroundColor: gender === "male" ? "#C1E5FF" : "#F7EBFF",
      }}
    >
      <DiscountExpires />
      <CustomButton
        className={`${styles.button} ${buttonClassName}`}
        onClick={buttonClick}
      >
        {buttonText}
      </CustomButton>
    </header>
  );
}

export default Header;
