import type { ComponentMeta, ComponentStory } from "@storybook/react";
import { Image } from "./";
import "./story.css";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/Image",
  component: Image,
  args: {
    className: "story-image",
    image: {
      width: 512,
      height: 512,
      src: "https://assets.devize.com/uploads/generic/avatar-sample.jpeg",
    },
  },
} as ComponentMeta<typeof Image>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Image> = (args) => <Image {...args} />;

export const Cloudflare = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Cloudflare.args = {
  className: "story-image",
  image: {
    width: 512,
    height: 512,
    src: "https://assets.devize.com/uploads/generic/avatar-sample.jpeg",
  },
};

export const Shopify = Template.bind({});
Shopify.args = {
  className: "story-image",
  image: {
    width: 1280,
    height: 1920,
    src: "https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg",
  },
};

export const Local = Template.bind({});
Local.args = {
  className: "story-image",
  image: {
    width: 1280,
    height: 1920,
    src: "/cdn-cgi/image/f=auto/api/upload/public/2c6c032bc4d04ac9bb2ad211f2862f58-moxie_logo-1692138805304.avif",
  },
};

export const LocalPlain = Template.bind({});
LocalPlain.args = {
  className: "story-image",
  image: {
    width: 1280,
    height: 1920,
    src: "/api/upload/public/cover-1743794409760.png",
  },
};

export const Bug = Template.bind({});
Bug.args = {
  className: "story-image",
  image: {
    src: "/api/upload/public/personal-mark-2020-512-2-1756145125428.png",
  },
};