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

const meta: Meta<BreadcrumbComponent> = {
  title: 'Components/Breadcrumb/Breadcrumb',
  id: 'breadcrumb',
  component: BreadcrumbComponent,
  decorators: [
    moduleMetadata({
      imports: [BreadcrumbItemComponent]
    })
  ],
  parameters: {
    docs: {
      imports: [BreadcrumbComponent, BreadcrumbItemComponent]
    }
  }
};

export default meta;

type Story = StoryObj<BreadcrumbComponent>;

export const Breadcrumb: Story = {
  render: (args) => ({
    props: args,
    template: `
    <nj-breadcrumb ${argsToTemplate(args)}>
      <nj-breadcrumb-item href="#">Home</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Library</nj-breadcrumb-item>
      <nj-breadcrumb-item [isActive]="true">Data</nj-breadcrumb-item>
    </nj-breadcrumb>
  `
  })
};

export const MinifiedBreadcrumb: Story = {
  render: (args) => ({
    props: args,
    template: `
    <nj-breadcrumb ${argsToTemplate(args)}>
      <nj-breadcrumb-item href="#" icon="home"></nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">User</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Library</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Data</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Data-1</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Data-2</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Data-3</nj-breadcrumb-item>
      <nj-breadcrumb-item href="#">Data-4</nj-breadcrumb-item>
      <nj-breadcrumb-item [isActive]="true">Data-5</nj-breadcrumb-item>
    </nj-breadcrumb>
  `
  })
};