import React from "react";
import { Carousel } from "react-bootstrap";
import Taskmanagement from "./Img/taskmanager.png";
import logmanagement from "./Img/logmanager.png";
import Userlevel from "./Img/Userlevel.png";
import Communication from "./Img/Communication.png";
import Notifyme from "./Img/Notifyme.png";
import Statistic from "./Img/Statistics.png";
import { useTranslation } from "react-i18next";
import "./Carousel.css";

export default function Napcarousel(props) {
  const { t } = useTranslation();
  let carouselitem = [
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Taskmanagement}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.Task Manager.content")}
          </p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Userlevel}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.User levels.content")}
          </p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={logmanagement}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.Log manager.content")}
          </p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Userlevel}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.Attendance.content")}
          </p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Communication}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.Communication.content")}
          </p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Taskmanagement}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>{t("features.Support.content")}</p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Notifyme}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.Notify me function.content")}
          </p>
        </>
      ),
    },
    {
      images: (
        <>
          <img
            className="d-block w-100 mb-3 "
            src={Statistic}
            style={{ maxWidth: "100%" }} alt=""
          />
          <p style={{ fontFamily: "light" }}>
            {t("features.Statistics.content")}
          </p>
        </>
      ),
    },
  ];
  return (
    <Carousel
      style={{ backgroundColor: "transparent" }}
      nextIcon={<span aria-hidden="true" className="nexticon" />}
      prevIcon={<span aria-hidden="true" className="previcon" />}
      fade
      activeIndex={props.activeIndex}
      onSelect={props.selectedIndex}>
      {carouselitem.map((value) => {
        return (
          <Carousel.Item style={{ backgroundColor: "transparent" }}>
            {value.images}
          </Carousel.Item>
        );
      })}
    </Carousel>
  );
}
