import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { SkeletonContainerComponent, SkeletonRectangleComponent } from '../../public-api';

const meta: Meta<SkeletonContainerComponent> = {
  title: 'Components/Skeleton/SkeletonContainer',
  id: 'skeleton-container',
  component: SkeletonContainerComponent,
  decorators: [
    moduleMetadata({
      imports: [SkeletonRectangleComponent]
    })
  ],
  parameters: {
    docs: {
      imports: [SkeletonContainerComponent, SkeletonRectangleComponent]
    }
  }
};

export default meta;

type Story = StoryObj<SkeletonContainerComponent>;

export const SkeletonContainer: Story = {
  args: {
    screenReaderLabel: 'Content is loading'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-skeleton-container ${argsToTemplate(args)}>
      <nj-skeleton-rectangle size="giga"></nj-skeleton-rectangle>
      <nj-skeleton-rectangle></nj-skeleton-rectangle>
      <nj-skeleton-rectangle></nj-skeleton-rectangle>
    </nj-skeleton-container>
  `
  })
};