import React from 'react';
import styled from 'styled-components';
import Badge from '../..';
import { Display } from '../../../../common/Display';
export default {
  title: 'Molecules / Badge / Nested',
  parameters: {
    component: Badge.Nested
  }
};
var StyledHoverShowcase = styled.div.withConfig({
  displayName: "NestedBadgestories__StyledHoverShowcase",
  componentId: "sc-716fie-0"
})(["display:flex;flex-wrap:wrap;gap:8px;:hover{cursor:pointer;background-color:", ";}"], function (_ref) {
  var theme = _ref.theme;
  return theme.colorTokens.neutral.background_hover;
});
var HoverLogoShowcase = function HoverLogoShowcase() {
  return React.createElement(StyledHoverShowcase, null, React.createElement(Badge.Nested, {
    badgeSize: "xl",
    logoUrl: "/logo/nordnet.png",
    country: "SE"
  }));
};
var HoverFallbackShowcase = function HoverFallbackShowcase() {
  return React.createElement(StyledHoverShowcase, null, React.createElement(Badge.Nested, {
    badgeSize: "xl",
    fallback: "Nordnet",
    country: "SE"
  }));
};
export var Showcase = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Extra large logo with flag (36x40 px)',
        component: React.createElement(Badge.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png",
          country: "SE"
        })
      }, {
        title: 'Large (default) logo with flag (28x32 px)',
        component: React.createElement(Badge.Nested, {
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png",
          country: "SE"
        })
      }, {
        title: 'Medium logo with flag (26x28 px)',
        component: React.createElement(Badge.Nested, {
          badgeSize: "m",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png",
          country: "SE"
        })
      }, {
        title: 'Extra large logo',
        component: React.createElement(Badge.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png"
        })
      }, {
        title: 'Large (default) logo',
        component: React.createElement(Badge.Nested, {
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png"
        })
      }, {
        title: 'Medium logo',
        component: React.createElement(Badge.Nested, {
          badgeSize: "m",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png"
        })
      }, {
        title: 'Extra large fallback with flag',
        component: React.createElement(Badge.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet",
          country: "SE"
        })
      }, {
        title: 'Large fallback with flag',
        component: React.createElement(Badge.Nested, {
          fallback: "Nordnet",
          country: "SE"
        })
      }, {
        title: 'Medium fallback with flag',
        component: React.createElement(Badge.Nested, {
          badgeSize: "m",
          fallback: "Nordnet",
          country: "SE"
        })
      }, {
        title: 'Extra large fallback',
        component: React.createElement(Badge.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet"
        })
      }, {
        title: 'Large fallback',
        component: React.createElement(Badge.Nested, {
          fallback: "Nordnet"
        })
      }, {
        title: 'Medium fallback',
        component: React.createElement(Badge.Nested, {
          badgeSize: "m",
          fallback: "Nordnet"
        })
      }, {
        title: 'Extra large without fallback',
        component: React.createElement(Badge.Nested, {
          badgeSize: "xl"
        })
      }, {
        title: 'Large without fallback',
        component: React.createElement(Badge.Nested, null)
      }, {
        title: 'Medium without fallback',
        component: React.createElement(Badge.Nested, {
          badgeSize: "m"
        })
      }, {
        title: 'Hover logo showcase',
        component: React.createElement(HoverLogoShowcase, null)
      }, {
        title: 'Hover fallback showcase',
        component: React.createElement(HoverFallbackShowcase, null)
      }]
    });
  }
};