import React from "react";

import "./ImageBtnWidget.scss";
import { ButtonGrid } from "../ButtonGrid/ButtonGrid.jsx";

/**
 * Full-width image with an optional {@link ButtonGrid} below it
 * ("imageBtnWidget" element type).
 *
 * @param {Object} props
 * @param {string} props.image - Image URL.
 * @param {{items: Array, onNavigate: function(string): void}} [props.buttonGrid] - Adapted ButtonGrid props (see ButtonGrid/index.js), rendered when `items` is present.
 */
export const ImageBtnWidget = ({ image, buttonGrid }) => {
  return (
    <div className="imagebtnwidget">
      <img className="imagebtnwidget__img" src={image} alt="" />
      {buttonGrid?.items && (
        <ButtonGrid items={buttonGrid.items} onNavigate={buttonGrid.onNavigate} />
      )}
    </div>
  );
};