import React from "react";

const Header = () => {
  return (
    <div className="flex items-center justify-center gap-3">
      <div className="flex w-full items-center flex-col md:flex-row justify-between gap-4">
        <div className=" flex items-center  gap-3">
          <button
            //   onClick={() => setIsOpenCardModal(true)}
            className="cursor-pointer text-xs md:text-sm p-2 px-4 font-extrabold text-white bg-[var(--color-gray)] hover:text-white italic font-sofia transition"
          >
            &lt; BACK
          </button>
          <h1 className="text-sm md:text-2xl font-extrabold italic uppercase">
            Roll Game
          </h1>
        </div>

        <button className="flex items-center justify-between bg-[#29313D] font-sofia text-sm md:text-base 2xl:text-lg uppercase min-w-[250px] font-bold px-4 py-2">
          <span>Bets made</span>
          <span>26</span>
        </button>
      </div>
    </div>
  );
};

export default Header;
