import { Col, Container, Nav, Row, Tab } from "react-bootstrap";
import Napcarousel from "../Carousel/Carousel";
import Heading from "../Heading/Heading";
import React, { useState } from "react";
import featuresbg from "./Img/featuresbg.png";

import "./Features.css";
import { useTranslation } from "react-i18next";

export default function Features({ id }) {
  const { t } = useTranslation();
  let tabs = [
    {
      span: "01",
      tabname: <>{t("features.Task Manager.title")}</>,
    },
    {
      span: "02",
      tabname: <>{t("features.User levels.title")}</>,
      event: "User levels",
    },
    {
      span: "03",
      tabname: <>{t("features.Log manager.title")}</>,
    },
    {
      span: "04",
      tabname: <>{t("features.Attendance.title")}</>,
      event: "Attendance",
    },
    {
      span: "05",
      tabname: <>{t("features.Communication.title")}</>,
    },
    {
      span: "06",
      tabname: <>{t("features.Support.title")}</>,
    },
    {
      span: "07",
      tabname: <>{t("features.Notify me function.title")}</>,
    },
    {
      span: "08",
      tabname: <>{t("features.Statistics.title")}</>,
    },
  ];
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  return (
    <>
      <section
        className="pt-5 pb-5 sectionShadow "
        id={id}
        style={{
          paddingTop: "80px",

          backgroundPosition: "bottom",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
        }}
      >
        <Container className="pt-5 pb-5 divider">
          <Row md={2} lg={2} className=" pt-5 pb-4 align-items-center">
            <Col xl={4} lg={4} sm={12} md={12} xs={12}>
              <Tab.Container id="left-tabs-example" defaultActiveKey="first">
                <Row>
                  <Heading
                    className="pb-2 future "
                    title={t("features.heading")}
                    fontSize="32px"
                    fontFamily="semibold"
                  />
                  <Col className=" d-none  d-lg-block ">
                    <Nav className="flex-column">
                      {tabs.map((tab, i) => {
                        return (
                          <Nav.Link
                            href={`#features`}
                            onClick={() => {
                              handleSelect(i);
                            }}
                            className="tabsstyle  "
                            style={
                              i === index
                                ? {
                                    color: "black",

                                    borderRight: "8px solid #0262F7",
                                    backgroundColor: "transparent",
                                  }
                                : undefined
                            }
                          >
                            <>
                              <span
                                style={
                                  i === index ? { color: "#0262F7" } : undefined
                                }
                                className="spanstyle"
                              >
                                {tab.span}{" "}
                              </span>{" "}
                              {tab.tabname}{" "}
                            </>
                          </Nav.Link>
                        );
                      })}
                    </Nav>
                    <div style={{ paddingTop: "20px" }}>
                      {/* <Ibutton
                        title="Get Started"
                        paddingTop="12px"
                        paddingBottom="12px"
                      /> */}
                    </div>
                  </Col>
                </Row>
              </Tab.Container>
            </Col>
            <Col xl={8} lg={8} md={12} sm={12} xs={12}>
              <Napcarousel activeIndex={index} selectedIndex={handleSelect} />
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
}
