import React from "react";
import "./Features.scss";

const Features = ({ items }) => (
  <div className="Features">
    {items.map((item, index) => (
      <div
        className="Features__columns columns is-variable is-8 is-vcentered has-text-centered-mobile"
        key={index}
      >
        <div className="column is-half">
          <h3 className="Features__title title has-text-weight-bold is-spaced is-3">
            {item.title}
          </h3>
          <p className="subtitle">{item.description}</p>
        </div>
        <div className="column">
          <figure className="Features__image image">
            <img src={item.image} alt={item.title} />
          </figure>
        </div>
      </div>
    ))}
  </div>
);

export default Features;