import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import Link from '@docusaurus/Link';

const FeatureList = [
  {
    title: 'Easy to Use',
    imgName: 'easy-to-use-icon.svg',
    description: (
      <>
        EcoDash is built to be simple to install and use, both for the administrators and the end users.
      </>
    ),
    buttonLabel: "Install",
    buttonDest: "/docs/install"
  },
  {
    title: 'All the data you need, nothing more',
    imgName: 'data-analysis-icon.svg',
    description: (
      <>
        The dashboard has all the most useful information, while keeping itself clean, minimalistic and easy to understand by anyone.
      </>
    ),
    buttonLabel: "See the demo",
    buttonDest: "https://demo.ecodash.xyz"
  },
  {
    title: 'Widely compatible',
    imgName: 'power-cord-icon.svg',
    description: (
      <>
        EcoDash supports a wide range of electricity consumption monitoring devices, including Zigbee smart plugs.
      </>
    ),
    buttonLabel: "Compatibility table",
    buttonDest: "o"
  },
];

function Feature({title, imgName, description, buttonLabel, buttonDest}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <img src={'/img/' + imgName} className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
        <p><a href={buttonDest}>{buttonLabel}</a></p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}