import React from "react";
import { PlanProps } from "../../index";
import "./style.css";

interface IPlanProps {
  Plans: PlanProps[];
  Currency: string;
  BackColor?: string;
  Color?: string;
}

const Plan: React.FC<IPlanProps> = (props: IPlanProps) => {
  return (
    <section className="OPlanContainer">
      <div className="OPlan_Group">
        {props.Plans?.map((data, index) => {
          return (
            <div className="OPlan" key={index}>
              {props.BackColor ? (
                <div
                  className="OPlanHeader"
                  style={{ backgroundColor: props.BackColor }}
                >
                  {data.highlightText ? (
                    <div className="OHighlight">
                      <p className="OHighlightText">{data.highlightText}</p>
                    </div>
                  ) : null}
                  <p style={{ color: props.Color }}>{data.title}</p>
                  {data.titleDescription ? (
                    <p style={{ color: props.Color }}>
                      {data.titleDescription}
                    </p>
                  ) : null}
                </div>
              ) : (
                <div className="OPlanHeader">
                  {data.highlightText ? (
                    <div className="OHighlight">
                      <p className="OHighlightText">{data.highlightText}</p>
                    </div>
                  ) : null}
                  <p style={{ color: props.Color }}>{data.title}</p>
                  {data.titleDescription ? (
                    <p style={{ color: props.Color }}>
                      {data.titleDescription}
                    </p>
                  ) : null}
                </div>
              )}
              <div className="OPlanPrice">
                <span className="OCurrency">{props.Currency}</span>
                <p className="OPrice">
                  {data.price}
                  {data.duration ? (
                    <span className="OPlanDuration">/{data.duration}</span>
                  ) : null}
                </p>
              </div>
              {props.BackColor ? (
                <div className="OSelect">
                  <a
                    href={data.href}
                    style={{
                      backgroundColor: props.BackColor,
                      color: props.Color,
                    }}
                  >
                    Select
                  </a>
                  {data.guarantee ? (
                    <p className="OGuarantee">{data.guarantee}</p>
                  ) : null}
                </div>
              ) : (
                <div className="OSelect">
                  <a href={data.href} style={{ color: props.Color }}>
                    Select
                  </a>
                  {data.guarantee ? (
                    <p className="OGuarantee">{data.guarantee}</p>
                  ) : null}
                </div>
              )}
              <div className="OChoices">
                {data.advantages?.map((advantage, key) => {
                  return (
                    <div key={key} className="OChoiceGroup">
                      <svg
                        viewBox="0 0 512 512"
                        xmlns="http://www.w3.org/2000/svg"
                        style={{color: props.BackColor}}
                      >
                        <path
                          fill="currentColor"
                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                        />
                      </svg>
                      <p>{advantage.text}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

export default Plan;