import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
import { LabelComponent } from '@isa/ui/label';

type LabelInputs = {
  active: boolean;
};

const meta: Meta<LabelInputs> = {
  component: LabelComponent,
  title: 'ui/label/Label',
  argTypes: {
    active: {
      control: { type: 'boolean' },
      description: 'Determines if the label is active (hover/pressed state)',
    },
  },
  args: {
    active: false,
  },
  render: (args) => ({
    props: args,
    template: `<ui-label ${argsToTemplate(args)}>Prämie</ui-label>`,
  }),
};
export default meta;

type Story = StoryObj<LabelComponent>;

export const Default: Story = {
  args: {},
};

export const Active: Story = {
  args: {
    active: true,
  },
};

export const RewardExample: Story = {
  args: {},
  render: () => ({
    template: `
      <div style="display: flex; gap: 1rem; align-items: center;">
        <ui-label>Prämie</ui-label>
        <ui-label [active]="true">Active</ui-label>
      </div>
    `,
  }),
};
