import type { Meta, StoryObj } from '@storybook/html';
import '@42/styles/breadcrumb.css';

interface BreadcrumbArgs {
  items: { name: string; href: string }[];
}

const meta: Meta<BreadcrumbArgs> = {
  title: 'Presentational/Breadcrumb',
  tags: ['autodocs'],
  args: {
    items: [
      { name: 'Home', href: '#' },
      { name: 'Lists', href: '#' },
      { name: 'Subscribers', href: '#' },
    ],
  },
  render: ({ items }) => {
    const nav = document.createElement('nav');
    nav.className = 'c42-breadcrumb';
    nav.setAttribute('aria-label', 'Breadcrumb');
    const lastIndex = items.length - 1;
    const crumbs = items
      .map((item, index) => {
        const current = index === lastIndex ? ' aria-current="page"' : '';
        return `<li class="c42-breadcrumb-item"${current}><a href="${item.href}">${item.name}</a></li>`;
      })
      .join('');
    nav.innerHTML = `<ol class="c42-breadcrumb-list">${crumbs}</ol>`;
    return nav;
  },
};

export default meta;

type Story = StoryObj<BreadcrumbArgs>;

export const Default: Story = {};