import { IonIcon, IonItem, IonLabel, IonList } from "@ionic/react";
import { planetOutline, shuffle } from "ionicons/icons";

import { useAppSelector } from "#/store";

export default function SpecialSearchMenu() {
  const trendingCommunities = useAppSelector(
    (state) => state.community.trendingCommunities,
  );
  const communitiesCount = useAppSelector(
    (state) => state.site.response?.site_view.local_site?.communities,
  );

  // Prevent shift of content
  if (trendingCommunities === undefined) return;

  return (
    <IonList inset color="primary">
      {!!communitiesCount && (
        <IonItem routerLink="/search/random">
          <IonIcon icon={shuffle} color="primary" slot="start" />
          <IonLabel className="ion-text-nowrap">Random Community</IonLabel>
        </IonItem>
      )}
      <IonItem routerLink="/search/explore">
        <IonIcon icon={planetOutline} color="primary" slot="start" />
        <IonLabel className="ion-text-nowrap">Explore</IonLabel>
      </IonItem>
    </IonList>
  );
}
