import React, { useEffect, useState } from "react";
import style from "./variants.module.css";
import { useRouter } from "next/router";

const Variants = (props) => {
  const router = useRouter();
  const [data, setData] = useState([{ main: [] }]);
  useEffect(() => {
    if (props.variants) {
      setData(props.variants);
    }
    console.log("props.variants", props.variants);
  }, [props.variants]);
  return (
    <React.Fragment>
      {data &&
        data.length > 0 &&
        props.variants &&
        props.variants.length > 0 && (
          <div className={props.className}>
            {data.map((item) => (
              <div className={style.variant_section} key={item.name}>
                <div className={style.variant_title}>{item.title}</div>
                <div className={style.product_section}>
                  {item.main.map((innerItem, index) => (
                    <div
                      className={`${style.product_box} ${
                        props.product_id === innerItem.product_id
                          ? style.active
                          : ""
                      }`}
                      key={`${innerItem.title}_${innerItem.product_id}_${index}`}
                      onClick={() =>
                        props.current_id !== innerItem.product_id &&
                        router.push(`/product/${innerItem.product_id}?type=id`)
                      }
                    >
                      <div className={style.product_title}>
                        {innerItem.title}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
    </React.Fragment>
  );
};

export default Variants;
