import PropTypes from 'prop-types';
import React from 'react';
import Helmet from 'react-helmet';
import './style.css';
import Header from '../Header';
import Heading from './Heading';
import Demo from './Demo';
import Platforms from './Platforms';
import MainLinks from './MainLinks';
import Featured from './Featured';
import UsedBy from './UsedBy';
import Footer from '../Footer';

const featuredStorybooks = [
  {
    owner: 'https://avatars0.githubusercontent.com/u/698437?v=3&s=200',
    storybook: {
      name: 'React Dates',
      link: 'http://airbnb.io/react-dates/',
    },
    source: 'https://github.com/airbnb/react-dates',
  },

  {
    owner: 'https://avatars3.githubusercontent.com/u/239676?v=3&s=460',
    storybook: {
      name: 'React Native Web',
      link: 'https://necolas.github.io/react-native-web/storybook',
    },
    source: 'https://github.com/necolas/react-native-web',
  },

  {
    owner: 'https://avatars1.githubusercontent.com/u/15616844?v=3&s=200',
    storybook: {
      name: 'React Button',
      link: 'http://kadira-samples.github.io/react-button/',
    },
    source: 'https://github.com/kadira-samples/react-button',
  },
];

const Homepage = ({ users }) => (
  <div className="container">
    <Helmet title="Storybook - UI dev environment you'll love to use" />
    {/* <Header currentSection="home" />*/}
    <Heading />
    <Demo />
    {/* <Platforms />*/}
    <MainLinks />
    <UsedBy users={users} />
    {/* <Featured featuredStorybooks={featuredStorybooks} />*/}
    <Footer />
  </div>
);

Homepage.propTypes = {
  featuredStorybooks: PropTypes.array,
  users: PropTypes.array,
};

export default Homepage;