import Image from "next/image";
import styles from "../styles/Components.module.css";

export default function Select(props) {
  const { data, onSelect, selected = {} } = props;
  console.log("data", data, "selected", selected);
  return (
    <div className={styles.select}>
      {data &&
        data.map((border, index) => {
          return (
            <div
              className={[
                styles.borderKeeper,
                selected == border.id ? styles.selected : undefined,
              ].join(" ")}
              key={border.id}>
              <Image
                className={styles.userImage}
                src="/user.png"
                alt="user image"
                width={128}
                height={128}
                onClick={(ev) => {
                  onSelect(border.id);
                }}
              />
              <Image
                className={styles.borderImage}
                src={`/images/${border.imageName}`}
                alt={`border with id ${border.id}`}
                width={132}
                height={132}
                onClick={(ev) => {
                  onSelect(border.id);
                }}
              />
            </div>
          );
        })}
    </div>
  );
}