import type { Meta } from '@storybook/angular';
import { CircledIconComponent } from '../../lib/molecules/circled-icon/circled-icon.component';
import { svgList } from '../svg-list';
/**
 * 
 * **Sizing**: the circled icon takes all space available in it's parent component 
 */


const meta: Meta<CircledIconComponent> = {
  title: 'Molecules/Circled Icon',
  component: CircledIconComponent,
  tags: ['autodocs'],
  args: {
    backgroundColor: '#c0c0c0',
    color: '#000000',
    symbol: 'stock-line',
  },
  argTypes: {
    backgroundColor: {
      control: 'color',
      description: 'Circle background color',
      table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},
    },
    color: {
      control: 'color',
      description: 'Icon color',
      table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}},
    },
    symbol: {
      control: 'select',
      description: 'Icon name',
      options: svgList,
      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
    }
  },
};

export default meta;

const Template = (args: {backgroundColor: string, color: string, symbol: string}) => ({
  props: args,
  template: `
  <div style="width: 36px; height: 36px; margin: auto;">
    <mw-circled-icon
      backgroundColor="${args.backgroundColor}"
      color="${args.color}"
      symbol="${args.symbol}"
    ></mw-circled-icon>
  </div>
  `
});

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

