import type {ReactNode} from 'react';
import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';

type FeatureItem = {
  title: string;
  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
  description: ReactNode;
};

const FeatureList: FeatureItem[] = [
  {
    title: 'Unified Platform',
    Svg: require('@site/static/img/unified-platform.svg').default,
    description: (
      <>
          Different environments and audiences require different technologies to meet their needs.
          All of our technologies are available through a single unified platform.
      </>
    ),
  },
  {
    title: 'At Any Scale',
    Svg: require('@site/static/img/at-scale.svg').default,
    description: (
      <>
        Whether you have a single blog, or hundreds of sites, we can help you to reach your audience effectively.
          Our technologies typically do not require modifications to your CMS for long form publishing.
          We also support podcasts, video-on-demand, and live streaming.
      </>
    ),
  },
  {
    title: 'Training and Integration Services',
    Svg: require('@site/static/img/training-integration.svg').default,
    description: (
      <>
        We can provide training to your team to help them understand the benefits and how to make the best use
          of our technologies. We can also work with you to integrate our technologies with your existing CMS.
      </>
    ),
  },
];

function Feature({title, Svg, description}: FeatureItem) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

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