import React from "react";
import { SlideAirtable } from "../../../shared/types";
import { SlideshowStore } from "../../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../../platform/withPlatform";

type Props = {
  slideObject: SlideAirtable;
  store: SlideshowStore;
} & PlatformProps;

function Airtable(props: Props) {
  return (
    <div
      style={{
        height: 50,
        width: 50,
        position: "absolute",
        top: props.slideObject.x,
        left: props.slideObject.y,
        backgroundColor: "#ff0000",
      }}
    >
      Hello
    </div>

    // <iframe
    //   src="https://airtable.com/embed/shrdjRclTJYSqeFu0?backgroundColor=transparent"
    //   title="airtable"
    //   width="800"
    //   height="533"
    //   style={{
    //     background: "transparent",
    //     border: "1px solid #ccc",
    //     position: "absolute",
    //     top: props.slideObject.y,
    //     left: props.slideObject.x,
    //   }}
    //   frameBorder={0}
    // />
  );
}

export default withPlatform(Airtable);