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

type PrioLabelInputs = {
  priority: 1 | 2;
};

const meta: Meta<PrioLabelInputs> = {
  component: PrioLabelComponent,
  title: 'ui/label/PrioLabel',
  argTypes: {
    priority: {
      control: { type: 'select' },
      options: [1, 2],
      description: 'The priority level (1 = high, 2 = low)',
    },
  },
  args: {
    priority: 1,
  },
  render: (args) => ({
    props: args,
    template: `<ui-prio-label ${argsToTemplate(args)}>Pflicht</ui-prio-label>`,
  }),
};
export default meta;

type Story = StoryObj<PrioLabelComponent>;

export const Priority1: Story = {
  args: {
    priority: 1,
  },
  render: (args) => ({
    props: args,
    template: `<ui-prio-label [priority]="priority">Pflicht</ui-prio-label>`,
  }),
};

export const Priority2: Story = {
  args: {
    priority: 2,
  },
  render: (args) => ({
    props: args,
    template: `<ui-prio-label [priority]="priority">Prio 2</ui-prio-label>`,
  }),
};

export const AllPriorities: Story = {
  render: () => ({
    template: `
      <div style="display: flex; gap: 1rem; align-items: center;">
        <ui-prio-label [priority]="1">Pflicht</ui-prio-label>
        <ui-prio-label [priority]="2">Prio 2</ui-prio-label>
      </div>
    `,
  }),
};
