import { componentName } from '../src/components/descope-logo';
import { imgSrcControl } from './commonControls';

const Template = ({ src, width, height }) => `
  <style nonce="${window.DESCOPE_NONCE}">
  body {
    ${src ? `--descope-logo-url: url(${src});` : ''}
  }
  </style>
  <descope-logo
  st-width="${width || ''}"
  st-height="${height || ''}"
  ></descope-logo>
`;

export default {
  component: componentName,
  title: 'descope-logo',
  parameters: {
    panelPosition: 'right',
    controls: { expanded: true },
  },
  argTypes: {
    ...imgSrcControl,
    width: {
      name: 'Width',
      control: { type: 'text' },
    },
    height: {
      name: 'Height',
      control: { type: 'text' },
    },
  },
};

export const Default = Template.bind({});

Default.args = {
  src: 'https://static.descope.com/pages/P2KFKhheHR9aICDa9kYkrGsYNnk3/v2-alpha/light/logo.svg',
};
