import type { Meta, Story } from '@storybook/react';
import React from 'react';
import { InformationCenter } from '../../../components/InformationCenter/InformationCenter';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
import iconsAtlasJSON from '../../../mocks/atlas/icons/icons.json';
import iconsAtlasIMG from '../../../mocks/atlas/icons/icons.png';
import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';

import { IInformationCenterItem } from '@rpg-engine/shared';
import { mockBestiaryItems, mockFaqItems, mockItems, mockTutorials } from '../../../mocks/informationCenter.mocks';
 

const meta: Meta = {
  title: 'UI/Info/InformationCenter',
  component: InformationCenter,
  parameters: {
    layout: 'centered',
  },
};

export default meta;

const Template: Story = args => (
  <RPGUIRoot>
    <InformationCenter
      itemsAtlasJSON={itemsAtlasJSON}
      itemsAtlasIMG={itemsAtlasIMG}
      entitiesAtlasJSON={entitiesAtlasJSON}
      entitiesAtlasIMG={entitiesAtlasIMG}
      iconsAtlasJSON={iconsAtlasJSON}
      iconsAtlasIMG={iconsAtlasIMG}
      faqItems={mockFaqItems}
      bestiaryItems={mockBestiaryItems}
      videoGuides={mockTutorials}
      items={mockItems as unknown as IInformationCenterItem[]}
      {...args}
    />
  </RPGUIRoot>
);

export const Default = Template.bind({});
Default.args = {};

export const Loading = Template.bind({});
Loading.args = {
  loading: true,
};

export const Error = Template.bind({});
Error.args = {
  error: 'Failed to load content',
};

export const Empty = Template.bind({});
Empty.args = {
  faqItems: [],
  bestiaryItems: [],
  videoGuides: [],
  items: [],
}; 
