import type { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
import { DataBlockComponent } from './data-block.component';
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';

const meta: Meta<DataBlockComponent> = {
  title: 'Design System/Molecules/Data Block',
  component: DataBlockComponent,
  decorators: [moduleMetadata({ imports: [DataRowComponent] })],
  render: (args) => ({
    props: args,
    template: `
      <app-data-block [heading]="heading" [stacked]="stacked" [ariaLabel]="ariaLabel">
        <div app-data-row key="BIG-nummer" value="19012345601"></div>
        <div app-data-row key="Naam" value="J. de Vries"></div>
        <div app-data-row key="Beroep" value="Verpleegkundige"></div>
        <div app-data-row key="Registratiedatum" value="1 maart 2018"></div>
      </app-data-block>`,
  }),
};
export default meta;
type Story = StoryObj<DataBlockComponent>;

export const Default: Story = { args: { heading: 'Persoonsgegevens (BRP)' } };
export const ZonderKop: Story = { args: { ariaLabel: 'Registratiegegevens' } };
export const Stacked: Story = { args: { heading: 'Toelichting', stacked: true } };
