import { type Meta, type StoryObj } from '@storybook/angular';
import { SkeletonLoaderDirective } from '@isa/ui/skeleton-loader';

type SkeletonLoaderDirectiveInputs = {
  uiSkeletonLoader: boolean;
  uiSkeletonLoaderWidth?: string;
  uiSkeletonLoaderHeight?: string;
};

const meta: Meta<SkeletonLoaderDirectiveInputs> = {
  component: SkeletonLoaderDirective,
  title: 'ui/skeleton-loader/SkeletonLoaderDirective',
  args: {
    uiSkeletonLoader: false,
    uiSkeletonLoaderWidth: '100px',
    uiSkeletonLoaderHeight: '',
  },
  argTypes: {
    uiSkeletonLoader: { control: 'boolean' },
    uiSkeletonLoaderWidth: { control: 'text' },
    uiSkeletonLoaderHeight: { control: 'text' },
  },
  render: (args) => ({
    props: args,
    template: `<div *uiSkeletonLoader="${args.uiSkeletonLoader}; width: '${args.uiSkeletonLoaderWidth}'; height: '${args.uiSkeletonLoaderHeight}'"> This is my content! </div>`,
  }),
};

export default meta;

type Story = StoryObj<SkeletonLoaderDirectiveInputs>;

export const Default: Story = {};