import React from "react";
import { Container, Header, Wrapper } from "./index.styled";
import OptionsDropdown from "./components/optionsDropdown";
import {
  CMSNotification,
  analyticsNotification,
  supportNotification,
} from "../../hooks/notificationItem";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";

/**
 * @param {object} props
 * @param {"cms" | "analytics" | "support"} props.type - switch side navigate routes type
 * @returns {JSX.Element}
 */
const AdminNotification = ({ type }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Container>
      <Header>
        <h1>{findText("Notifications")}</h1>
        <p>
          {findText("Settings /")}
          <span>{findText("Notifications")}</span>
        </p>
      </Header>
      <Wrapper>
        {type === "analytics"
          ? analyticsNotification.map((notif, idx) => (
              <OptionsDropdown label={notif.title} key={idx} data={notif} />
            ))
          : type === "support"
          ? supportNotification.map((notif, idx) => (
              <OptionsDropdown label={notif.title} key={idx} data={notif} />
            ))
          : CMSNotification.map((notif, idx) => (
              <OptionsDropdown label={notif.title} key={idx} data={notif} />
            ))}
      </Wrapper>
    </Container>
  );
};
export default AdminNotification;
