import { componentName } from '../src/components/descope-recaptcha';

const Template = ({ enterprise, enabled, 'site-key': siteKey, variant, 'full-width': fullWidth }) =>
  `
    <descope-recaptcha
      enterprise="${enterprise}"
      site-key="${siteKey}"
      enabled="${enabled}"
      full-width="${fullWidth}"
      ${variant && variant !== 'none' ? `variant="${variant}"` : ''}
    >
      ${
        variant === 'text'
          ? `<descope-enriched-text variant="body1" mode="primary">This site is protected by reCAPTCHA</descope-enriched-text>`
          : ''
      }
    </descope-recaptcha>
  `;

export default {
  component: componentName,
  title: 'descope-recaptcha',
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['none', 'text', 'widget'],
    },
  },
};

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

Default.args = {
  enabled: false,
  'site-key': '',
  enterprise: false,
  'full-width': false,
};
