import React from 'react';
import '../style/App.css';
import Example, { CarouselBannerItem } from "./Example"

const items: CarouselBannerItem[] = [
  {
      Name: "Electronics",
      Caption: "Electrify your friends!",
      contentPosition: "left",
      Items: [
          {
              Name: "Macbook Pro",
              Image: "https://source.unsplash.com/featured/?macbook"
          },
          {
              Name: "iPhone",
              Image: "https://source.unsplash.com/featured/?iphone"
          }
      ]
  },
  {
      Name: "Home Appliances",
      Caption: "Say no to manual home labour!",
      contentPosition: "middle",
      Items: [
          {
              Name: "Washing Machine WX9102",
              Image: "https://source.unsplash.com/featured/?washingmachine"
          },
          {
              Name: "Learus Vacuum Cleaner",
              Image: "https://source.unsplash.com/featured/?vacuum,cleaner"
          }
      ]
  },
  {
      Name: "Decoratives",
      Caption: "Give style and color to your living room!",
      contentPosition: "right",
      Items: [
          {
              Name: "Living Room Lamp",
              Image: "https://source.unsplash.com/featured/?lamp"
          },
          {
              Name: "Floral Vase",
              Image: "https://source.unsplash.com/featured/?vase"
          }
      ]
  }
]

function App() {
  return (
    <div style={{padding: "40px 100px", backgroundColor: "#ebebeb"}}>
        <h1 style={{color: "#494949"}}>React Material UI Carousel Demo</h1>
        <p style={{marginBottom: "30px"}}>
            by <a href="http://learus.github.io" style={{textDecoration: "none", color: "cornflowerblue"}}>Learus</a><br/>
            <a href="https://github.com/Learus/react-material-ui-carousel.git" style={{textDecoration: "none", color: "cornflowerblue"}}>GitHub Repo</a>
        </p>
        
        <Example items={items}/>
        {/* <SecondExample/> */}
    </div>
  );
}

export default App;