export default {
  name: "Avatar",
  acceptsChildren: false,
  category: "Basic",
  styleProps: [
    {
      label: "Size",
      name: "size",
      type: { kind: "select" },
      options: [
        {
          label: "2xs",
          value: "2xs",
          selector: '[data-size="2xs"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-2xs)",
              width: "24px",
              height: "24px",
            },
          },
        },
        {
          label: "xs",
          value: "xs",
          selector: '[data-size="xs"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-xs)",
              width: "32px",
              height: "32px",
            },
          },
        },
        {
          label: "sm",
          value: "sm",
          selector: '[data-size="sm"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-sm)",
              width: "36px",
              height: "36px",
            },
          },
        },
        {
          label: "md",
          value: "md",
          selector: '[data-size="md"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-md)",
              width: "40px",
              height: "40px",
            },
          },
        },
        {
          label: "lg",
          value: "lg",
          selector: '[data-size="lg"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-md)",
              width: "44px",
              height: "44px",
            },
          },
        },
        {
          label: "xl",
          value: "xl",
          selector: '[data-size="xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-lg)",
              width: "48px",
              height: "48px",
            },
          },
        },
        {
          label: "2xl",
          value: "2xl",
          selector: '[data-size="2xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-xl)",
              width: "64px",
              height: "64px",
            },
          },
        },
      ],
      default: "md",
      help: 'The size of the avatr. "md" is the default size',
    },
    {
      label: "Variant",
      name: "variant",
      type: { kind: "select" },
      options: [
        {
          label: "Solid",
          value: "solid",
          selector: '[data-variant="solid"]',
          styles: {
            "": {
              "background-color": "var(--palette-solid)",
              color: "var(--palette-contrast)",
            },
          },
        },
        {
          label: "Subtle",
          value: "subtle",
          selector: '[data-variant="subtle"]',
          styles: {
            "": {
              "background-color": "var(--palette-subtle)",
              color: "var(--palette-fg)",
            },
          },
        },
        {
          label: "Outline",
          value: "outline",
          selector: '[data-variant="outline"]',
          styles: {
            "": {
              "border-width": "1px",
              "border-color": "var(--palette-muted)",
              color: "var(--palette-fg)",
            },
          },
        },
      ],
      default: "subtle",
    },
    {
      label: "Color Palette",
      name: "data-palette",
      type: { kind: "palette" },
      default: "brand",
      help: "The color scheme of the button",
    },
  ],
  props: [
    {
      label: "User",
      name: "user",
      type: { kind: "User", isDynamic: true },
      isDefault: true,
      default: null,
      placeholder: "The user to display",
      help: "The user to display",
    },
  ],
  events: [
    {
      label: "When clicked",
      name: "onClick",
      help: "Select an action to run when button is clicked",
    },
  ],
  defaultStyles: {
    "": {
      display: "inline-flex",
      "align-items": "center",
      "justify-content": "center",
      "font-weight": "var(--theme-fontWeights-medium)",
      "font-family": "var(--theme-fonts-body)",
      position: "relative",
      "vertical-align": "top",
      "flex-shrink": "0",
      "border-radius": "var(--theme-radii-full)",
    },
  },
  sources: [],
  actions: [],
} as const;