import React, { useEffect, useState } from "react";
import cssStyle from "./ToggleButton.module.css";

const defaultStyle = {
  marginTop: "0rem",
  color: "#0348a8",
  backgroundColor: "#d6eafd5e",
  selectedBtnTextColor: "white",
  selectedBtnBgColor: "#0348a8",
};

function ToggleButton({ data = [], discription, setSelect, url, style }) {
  const [selected, setSelected] = useState(0);
  const [customStyle, setCustomStyle] = useState(defaultStyle);

  useEffect(() => {
    if (style) setCustomStyle(style);
  }, []);

  return (
    <>
      <div
        className={cssStyle.container}
        style={{
          backgroundColor: customStyle.backgroundColor,
          marginTop: customStyle.marginTop,
        }}
      >
        {data.map((item, index) => {
          if (index === selected)
            return (
              <button
                className={cssStyle.selected}
                onClick={() => {
                  setSelected(index);
                  setSelect(index);
                }}
                style={{
                  color: customStyle.selectedBtnTextColor,
                  backgroundColor: customStyle.selectedBtnBgColor,
                }}
              >
                {item}
              </button>
            );
          return (
            <button
              onClick={() => {
                setSelected(index);
                setSelect(index);
              }}
              style={{ color: customStyle.color }}
            >
              {item}{" "}
            </button>
          );
        })}
      </div>
      <p>{selected === 0 ? discription?.[0] : discription?.[1]}</p>
      <a
        href={
          "/pricing/akadmy-product-pricing"
          // selected === 0 ? url?.[0] : url?.[1]
        }
      >
        <button
          className={`btn`}
          style={{ background: customStyle.selectedBtnBgColor }}
        >
          See all plans
        </button>
      </a>
    </>
  );
}

export default ToggleButton;
