export default {
  name: "Image",
  acceptsChildren: false,
  category: "Basic",
  props: [
    {
      label: "Image",
      name: "image",
      type: { kind: "image", isDynamic: true },
      isDefault: true,
      default: "https://assets.devize.com/uploads/generic/img-placeholder.svg",
      placeholder: "enter a url to an image",
      help: "The image to show",
    },
    {
      label: "Description",
      name: "altText",
      type: { kind: "text", isDynamic: true },
      isDefault: true,
      default: "",
      placeholder:
        "enter a description of the image (for use by screen readers)",
      help: "The image to show",
    },
    {
      label: "Is Critical?",
      name: "critical",
      type: { kind: "boolean" },
      isDefault: true,
      default: false,
      help: 'An image is "critical" if it is visible on the page before you scroll down',
    },
    {
      label: "Sizes",
      name: "sizes",
      type: { kind: "text" },
      default: null,
      help: "The sizes attribute specifies the width of the image, in pixels, at which the image will be displayed. It is used for responsive design. The value is a comma-separated list of media conditions or media condition and size value pairs.",
    },
  ],
  defaultStyles: {
    "": {
      "flex-grow": "1",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
      "object-fit": "cover",
    },
  },
  sources: [],
} as const;