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

export default function BorderImage(props) {
  const { key, border, selected, size, onSelect, customImage } = props;

  const imageSize = size || 128;

  const classNames = [
    styles.borderKeeper,
    selected == border.id ? styles.selected : undefined,
  ].join(" ");
  return (
    <div className={classNames} key={key}>
      <Image
        className={styles.userImage}
        src={customImage || "/user.png"}
        alt="user image"
        width={imageSize}
        height={imageSize}
        onClick={(ev) => {
          onSelect && onSelect(border.id);
        }}
      />
      <Image
        className={styles.borderImage}
        src={`/images/${border.imageName}`}
        alt={`border with id ${border.id}`}
        width={Math.floor(imageSize * 1.03125)}
        height={Math.floor(imageSize * 1.03125)}
        onClick={(ev) => {
          onSelect && onSelect(border.id);
        }}
      />
    </div>
  );
}