import React from "react";
import { Accordion, Table } from "react-bootstrap";
import { FaCheck } from "react-icons/fa";
import Heading from "../Heading/Heading.js";
import "./DetailedPricelList.css";
import { useTranslation } from "react-i18next";
export default function DetailedPricelList() {
  const { t } = useTranslation();
  let tableList = [
    {
      plan: <td>{t("pricingdetail.pickplan.Units of company")}</td>,
      basic: <td>{t("pricing.basic.1")}</td>,
      pro: <td>{t("pricing.pro.1")}</td>,
      premimum: <td>{t("pricing.premium.1")}</td>,
      franchise: <td>{t("pricing.franchise.1")}</td>,
    },

    {
      plan: <td>{t("pricingdetail.pickplan.log actions/month")}</td>,
      basic: <td>{t("pricing.basic.2")}</td>,
      pro: <td>{t("pricing.pro.2")}</td>,
      premimum: <td>{t("pricing.premium.2")}</td>,
      franchise: <td>{t("pricing.franchise.2")}</td>,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Smart logs")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },

    {
      plan: <td>{t("pricingdetail.pickplan.Log templates")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Custom log")}</td>,
      basic: "",
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Task management assign tasks")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Workflow assistance")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.User and role management")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: (
        <td>
          {t("pricingdetail.pickplan.Quantity of guest at one time.plan")}
        </td>
      ),
      basic: (
        <td>
          {t("pricingdetail.pickplan.Quantity of guest at one time.basic")}
        </td>
      ),
      pro: (
        <td>{t("pricingdetail.pickplan.Quantity of guest at one time.pro")}</td>
      ),
      premimum: (
        <td>
          {t("pricingdetail.pickplan.Quantity of guest at one time.premium")}
        </td>
      ),
      franchise: (
        <td>
          {t("pricingdetail.pickplan.Quantity of guest at one time.franchise")}
        </td>
      ),
    },
    {
      plan: (
        <td>{t("pricingdetail.pickplan.Quantity of Unit management.plan")}</td>
      ),
      basic: (
        <td>{t("pricingdetail.pickplan.Quantity of Unit management.basic")}</td>
      ),
      pro: (
        <td>{t("pricingdetail.pickplan.Quantity of Unit management.pro")}</td>
      ),
      premimum: (
        <td>
          {t("pricingdetail.pickplan.Quantity of Unit management.premium")}
        </td>
      ),
      franchise: (
        <td>
          {t("pricingdetail.pickplan.Quantity of Unit management.franchise")}
        </td>
      ),
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Teamwork assistance")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },

    {
      plan: <td>{t("pricingdetail.pickplan.Task tree")}</td>,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Logging assistance")}</td>,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: (
        <td>{t("pricingdetail.pickplan.Attendance tracking assistance")}</td>
      ),
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Ratings")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Chat")}</td>,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Group Chat")}</td>,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Smart chat bot")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Live support")}</td>,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Priority support")}</td>,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Dedicated consulting manager")}</td>,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Token reward program")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Incentive token allocation")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Integrations")}</td>,

      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Reports and statistics")}</td>,
      basic: <FaCheck className="iconStyle" />,
      pro: <FaCheck className="iconStyle" />,
      premimum: <FaCheck className="iconStyle" />,
      franchise: <FaCheck className="iconStyle" />,
    },
    {
      plan: <td>{t("pricingdetail.pickplan.Google auth.plan")}</td>,
      basic: <td>{t("pricingdetail.pickplan.Google auth.basic")}</td>,
      pro: <td>{t("pricingdetail.pickplan.Google auth.pro")}</td>,
      premimum: <td>{t("pricingdetail.pickplan.Google auth.premium")}</td>,
      franchise: <td>{t("pricingdetail.pickplan.Google auth.franchise")}</td>,
    },
  ];
  return (
    <>
      <Accordion flush className="">
        <Accordion.Item eventKey="0">
          <Accordion.Header style={{ fontFamily: "semibold" }}>
            <>{t("pricingdetail.Seemorefeatures")}</>
          </Accordion.Header>
          <Accordion.Body>
            <Table striped bordered hover responsive>
              <thead>
                <tr>
                  <th>
                    <Heading
                      className="resPlan"
                      title={t("pricingdetail.plan.pickplan")}
                      fontSize="25px"
                      fontFamily="semibold"
                    />
                  </th>
                  <th
                    className="text-center "
                    style={{ backgroundColor: "rgb(2 100 247 / 11%" }}
                  >
                    <Heading
                      className="resPlan"
                      title={t("pricingdetail.plan.basic")}
                      fontSize="25px"
                      fontFamily="semibold"
                    />
                  </th>
                  <th
                    className="text-center "
                    style={{ backgroundColor: "rgb(255 55 118 / 9%)" }}
                  >
                    <Heading
                      className="resPlan"
                      title={t("pricingdetail.plan.pro")}
                      fontSize="25px"
                      fontFamily="semibold"
                    />
                  </th>
                  <th
                    className="text-center "
                    style={{ backgroundColor: "rgb(82 218 252 / 14%)" }}
                  >
                    <Heading
                      className="resPlan"
                      title={t("pricingdetail.plan.premium")}
                      fontSize="25px"
                      fontFamily="semibold"
                    />
                  </th>
                  <td
                    className="text-center "
                    style={{ backgroundColor: "rgb(255 162 22 / 10%)" }}
                  >
                    <Heading
                      className="resPlan"
                      title={t("pricingdetail.plan.franchise")}
                      fontSize="25px"
                      fontFamily="semibold"
                    />
                  </td>
                </tr>
              </thead>
              <tbody>
                {tableList.map((table) => {
                  return (
                    <>
                      <tr className="trstyle">
                        {table.plan}
                        <td className="text-center ">{table.basic}</td>
                        <td className="text-center">{table.pro}</td>
                        <td className="text-center">{table.premimum}</td>
                        <td className="text-center">{table.franchise}</td>
                      </tr>
                    </>
                  );
                })}
              </tbody>
            </Table>
          </Accordion.Body>
        </Accordion.Item>
      </Accordion>
    </>
  );
}
