import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { NJIcon } from '../icon/NJIcon';
import { NJNavbar } from './NJNavbar';
import { NJNavbarItem } from './NJNavbarItem';

const meta: Meta<typeof NJNavbar> = {
  title: 'Components/Navbar',
  id: 'navbar',
  component: NJNavbar,
  parameters: {
    docs: {
      imports: [NJNavbar, NJNavbarItem]
    }
  }
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    logo: {
      href: 'https://engie.com',
      target: '_self'
    },
    activeItemId: 'navitem2',
    searchButtonLabel: 'Search',
    searchPlaceholder: 'Enter search...',
    children: [
      <NJNavbarItem key={0} id="navitem1" href="#">
        Item 1
      </NJNavbarItem>,
      <NJNavbarItem key={1} id="navitem2" href="#">
        Item 2
      </NJNavbarItem>,
      <NJNavbarItem key={2} id="navitem3" href="#">
        Item 3
      </NJNavbarItem>,
      <NJNavbarItem key={3} id="navitem4" href="#">
        <NJIcon name="network_check" variant="brand" />
      </NJNavbarItem>
    ]
  }
};