import { COLORS } from "@heydovetail/ui-components";
import { storiesOf } from "@storybook/react";
import React from "react";
import { styled } from "typestyle-react";
import { ResponsiveImage } from "../ResponsiveImage";

storiesOf(`Attachments/${ResponsiveImage.name}`, module)
  .add("Sizes", () => (
    <>
      {[[200, 250], [2000, 250], [200, 2500]].map(([width, height], i) => (
        <React.Fragment key={i}>
          <p>
            {width}×{height}
          </p>
          <Stain>
            <ResponsiveImage width={width} height={height} />
          </Stain>
        </React.Fragment>
      ))}
    </>
  ))
  .add("Inside <picture>", () => (
    <>
      {[[200, 250], [2000, 250], [200, 2500]].map(([width, height], i) => (
        <React.Fragment key={i}>
          <p>
            {width}×{height}
          </p>
          <Stain>
            <picture>
              <ResponsiveImage width={width} height={height} />
            </picture>
          </Stain>
        </React.Fragment>
      ))}
    </>
  ));

const Stain = styled("div", {
  background: COLORS.blue,
  display: "inline-block",
  lineHeight: 0
});