import {
  IonIcon,
  IonButton,
  IonText,
  IonCard,
  IonCardContent,
} from "@ionic/react";
import { lockClosedOutline } from "ionicons/icons";
import { useIonRouter } from "@ionic/react";

const NotLoggedIn: React.FC = () => {
  const router = useIonRouter();

  return (
    <div className="not-logged-wrapper">
      <IonCard className="not-logged-card">
        <IonCardContent className="not-logged-content">

          <IonIcon icon={lockClosedOutline} className="not-logged-icon" />

          <IonText className="not-logged-title">
            <h2>You’re Not Logged In</h2>
          </IonText>

          <IonText className="not-logged-sub">
            <p>Please log in to continue using this feature.</p>
          </IonText>

          <IonButton
            shape="round"
            color="primary"
            expand="block"
            onClick={() => router.push("/login", "forward")}
            className="not-logged-btn"
          >
            Login Now
          </IonButton>

        </IonCardContent>
      </IonCard>
    </div>
  );
};

export default NotLoggedIn;