import Button from "../../Button";
import AuthIcon from "../../icons/AuthIcon";

interface AuthProps {
  isAuth: boolean;
  userName: string;
}

const AuthMobile = ({ isAuth, userName }: AuthProps) => {
  return (
    <>
      {isAuth ? (
        <div className="flex gap-4 text-black justify-start w-full items-center px-4 py-2 bg-white rounded-lg">
          <p>{userName}</p>
          <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
            {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
          </div>
        </div>
      ) : (
        <div className="flex gap-4 text-black justify-center w-full items-center">
          <Button
            buttonType="cta"
            text="Login"
            icon={<AuthIcon />}
            className="w-full justify-center"
          />
        </div>
      )}
    </>
  );
};

export default AuthMobile;