import type { Meta, StoryObj } from '@storybook/react-vite';
import { SidePanel } from '../../src/ui/SidePanel/SidePanel';

const NAV_ITEMS = ['Dashboard', 'Scenarios', 'Environments', 'Reports', 'Settings'];

function NavList() {
  return (
    <ul
      style={{
        listStyle: 'none',
        margin: 0,
        padding: 0,
        display: 'flex',
        flexDirection: 'column',
        gap: 2,
      }}
    >
      {NAV_ITEMS.map((item) => (
        <li key={item}>
          <button
            style={{
              width: '100%',
              textAlign: 'left',
              background: 'none',
              border: 'none',
              borderRadius: 'var(--radius-md)',
              padding: 'var(--space-2) var(--space-3)',
              fontSize: 'var(--font-size-sm)',
              color: 'var(--color-text)',
              cursor: 'pointer',
              fontFamily: 'var(--font-family)',
            }}
            onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-secondary)')}
            onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}
          >
            {item}
          </button>
        </li>
      ))}
    </ul>
  );
}

const meta: Meta<typeof SidePanel> = {
  title: 'UI/SidePanel',
  component: SidePanel,
  parameters: { layout: 'fullscreen' },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div style={{ display: 'flex', height: 420, background: 'var(--color-bg)' }}>
        <Story />
        <div
          style={{
            flex: 1,
            padding: 'var(--space-6)',
            color: 'var(--color-text-muted)',
            fontSize: 'var(--font-size-sm)',
          }}
        >
          Main content area
        </div>
      </div>
    ),
  ],
};
export default meta;
type Story = StoryObj<typeof SidePanel>;

export const Default: Story = {
  args: {
    header: 'Navigation',
    children: <NavList />,
  },
};