import type { Meta } from '@storybook/angular';
import { SvgComponent } from '../lib/atoms/svg/svg.component';
import { svgList } from './svg-list';

const meta: Meta<SvgComponent> = {
    title: 'Atoms/Svg',
    component: SvgComponent,
    tags: ['autodocs'],
    args: {
        width: "24px",
        height: "24px",
        color: "#000000",
        symbol: "stock-line",
    },
    argTypes: {
        width: {
            description: 'Icon width with units (px, rem, etc)',
            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}
        },
        height: {
            description: 'Icon height with units (px, rem, etc)',
            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}
        },
        color: {
            description: 'Icon color',
            table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}
        },
        symbol: {
            control: 'select',
            options: svgList,
            description: 'Icon name',
            table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
        }, 
    }
} ;

export default meta;

const Template = (args: { width: string, height: string, color: string, symbol: string,}) => ({
  props: args,
  template: `
  <div style="display:flex; justify-content: center;">
    <mw-svg
        width="${args.width}"
        height="${args.height}"
        color="${args.color}"
        symbol="${args.symbol}"
    ></mw-svg>
  </div>`
});

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