import React from "react";
import classNames from "classnames";
import styles from "./index.less";

export function ImageLayout(props) {
  const { value, options = [], onChange } = props;
  const listLength = options.length;

  const handleClick = (selectedValue) => {
    if (selectedValue !== value) {
      onChange && onChange(selectedValue);
    }
  };

  if (!options || options.length === 0) {
    return null;
  }

  return (
    <div
      className={classNames(styles.radioWrap, {
        [styles.twoItem]: listLength === 2,
        [styles.threeItem]: listLength === 3,
        [styles.fourItem]: listLength === 4,
      })}
    >
      {options.map((item) => (
        <div
          key={item.value}
          onClick={() => handleClick(item.value)}
          className={classNames(styles.radioItem, {
            [styles.itemActive]: item.value === value,
          })}
        >
          <div
            className={classNames(styles.imgBox, { [styles.imgBoxActive]: item.value === value })}
          >
            <img src={item.imgSrc} alt={item.name} className={styles.layoutImg} />
          </div>
          <div
            className={classNames(styles.layoutName, {
              [styles.layoutNameActive]: item.value === value,
            })}
          >
            {item.name}
          </div>
        </div>
      ))}
    </div>
  );
}