import { Card } from "react-bootstrap";
import { FaCheck } from "react-icons/fa";
import Ibutton from "../Button/Button";
import React from "react";
import "./PricingCard.css";
import Badge from "../Badge/Badge";

function PricingCard({
  price,
  className,
  plan,
  title,
  feature1,
  feature2,
  feature3,
  feature4,
  feature5,
  feature6,
  numOfUsers,
  totalUsers,
  btntitle,
  totalAmount,
  currency,
  amount,
  BadgebackgroundColor,
  BadgeTextColor,
  btnbackgroundColor,
}) {
  return (
    <>
      {className === "whitecard shadow" ? (
        <Card
          className={className}
          style={{
            borderStyle: "none",
            borderRadius: "10px",
            height: "620px",
            padding: "20px",
            backgroundColor: "#ECF3FF",
          }}
        >
          <Card.Header
            style={{ backgroundColor: "" }}
            className="cardheader   "
          >
            <Badge
              title={plan}
              fontSize="16px"
              backgroundColor={BadgebackgroundColor}
              color={BadgeTextColor}
            />

            <h2
              className="pt-4"
              style={{
                fontFamily: "semibold",
                color: "#0262F7",
                fontSize: "36px",
              }}
            >
              <sup style={{ fontSize: "15px", marginRight: "8px" }}>HUF</sup>
              {price}{" "}
              <span
                style={{
                  fontSize: "15px",
                  color: "black",
                  fontFamily: "light",
                }}
              >
                {title}
              </span>
            </h2>
            <div>
              {totalUsers && numOfUsers && (
                <p
                  className=""
                  style={{ fontFamily: "semibold", fontSize: "14px" }}
                >
                  {totalUsers}{" "}
                  <span style={{ color: "#0262F7" }}>{numOfUsers}</span>
                </p>
              )}
              {totalAmount && amount && (
                <p
                  className=""
                  style={{ fontFamily: "semibold", fontSize: "14px" }}
                >
                  {totalAmount} <span style={{ color: "black" }}>{amount}</span>{" "}
                  {currency}
                </p>
              )}
            </div>
          </Card.Header>

          <Card.Body>
            <Card.Text>
              {feature1 && (
                <p className=" ">
                  <FaCheck className=" featurestyle mr-3" />
                  {feature1}
                </p>
              )}
              {feature2 && (
                <p className=" ">
                  <FaCheck className=" featurestyle mr-3" />
                  {feature2}
                </p>
              )}

              {feature3 && (
                <p className=" ">
                  <FaCheck className=" featurestyle mr-3" />
                  {feature3}
                </p>
              )}
              {feature4 && (
                <p className=" ">
                  <FaCheck className=" featurestyle mr-3" />
                  {feature4}
                </p>
              )}
              {feature5 && (
                <p className=" ">
                  <FaCheck className=" featurestyle mr-3" />
                  {feature5}
                </p>
              )}
              {feature6 && (
                <p className=" ">
                  <FaCheck className=" featurestyle mr-3" />
                  {feature6}
                </p>
              )}
            </Card.Text>
          </Card.Body>
          <Card.Footer
            style={{ backgroundColor: "transparent", borderTop: "0px" }}
            className=""
          >
            <div className=" pt-3  ">
              <Ibutton
                onClick={() => {
                  window.location.replace("/#contactus");
                }}
                className="planbtnwhite"
                color="white"
                backgroundColor={btnbackgroundColor}
                borderColor="#0262f7"
                title={btntitle}
                paddingTop="12px"
                paddingBottom="12px"
              />
            </div>
          </Card.Footer>
        </Card>
      ) : (
        <Card
          className={className}
          style={{
            borderRadius: "10px",
            borderStyle: "none",
            padding: "20px",
            height: "620px",
          }}
        >
          <Card.Header
            style={{ backgroundColor: "" }}
            className="cardheader   "
          >
            <div>
              <Badge
                title={plan}
                fontSize="16px"
                backgroundColor={BadgebackgroundColor}
                color={BadgeTextColor}
              />
            </div>
            <h2
              className="pt-4"
              style={{
                fontFamily: "semibold",
                color: "white",
                fontSize: "36px",
              }}
            >
              <sup style={{ fontSize: "15px" }}>HUF</sup> {price}{" "}
              <span
                style={{
                  fontSize: "15px",
                  color: "white",
                  fontFamily: "light",
                }}
              >
                {title}
              </span>
            </h2>
            <div>
              <p
                style={{
                  fontFamily: "semibold",
                  fontSize: "16px",
                  color: "white",
                }}
              >
                {totalUsers}{" "}
                <span style={{ color: "white" }}>{numOfUsers}</span>
              </p>
              <p
                className=""
                style={{
                  fontFamily: "semibold",
                  fontSize: "14px",
                  color: "white",
                }}
              >
                {totalAmount}: <span style={{ color: "white" }}>{amount}</span>{" "}
                {currency}
              </p>
            </div>
          </Card.Header>

          <Card.Body>
            <Card.Text>
              <p className=" " style={{ color: "white" }}>
                <FaCheck className=" featurestyle mr-3" />
                {feature1}
              </p>
              <p className=" " style={{ color: "white" }}>
                <FaCheck className=" featurestyle mr-3" />
                {feature2}
              </p>

              <p className=" " style={{ color: "white" }}>
                <FaCheck className=" featurestyle mr-3" />
                {feature3}
              </p>
              <p className=" " style={{ color: "white" }}>
                <FaCheck className=" featurestyle mr-3" />
                {feature4}
              </p>
              <p className=" " style={{ color: "white" }}>
                <FaCheck className=" featurestyle mr-3" />
                {feature5}
              </p>
              <p className=" " style={{ color: "white" }}>
                <FaCheck className=" featurestyle mr-3" />
                {feature6}
              </p>
            </Card.Text>
          </Card.Body>
          <Card.Footer
            style={{ backgroundColor: "transparent", borderTop: "0px" }}
            className=""
          >
            <div className=" pt-3  ">
              <Ibutton
                onClick={() => {
                  window.location.replace("/commingsoon");
                }}
                className="planbtnblue"
                color="white"
                backgroundColor={btnbackgroundColor}
                borderColor="white"
                title={btntitle}
                paddingTop="12px"
                paddingBottom="12px"
              />
            </div>
          </Card.Footer>
        </Card>
      )}
    </>
  );
}
export default PricingCard;
