import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
  CharacterSkinSelectionModal,
  ICharacterSkinSelectionModalProps,
} from '../../../components/Character/CharacterSkinSelectionModal';
import atlasJSON from '../../../mocks/atlas/entities/entities.json';
import atlasIMG from '../../../mocks/atlas/entities/entities.png';

const meta: Meta = {
  title: 'Character/Character/Skin Selection',
  component: CharacterSkinSelectionModal,
};

export default meta;

const Template: Story<ICharacterSkinSelectionModalProps> = (
  args: ICharacterSkinSelectionModalProps
) => (
  <RPGUIRoot>
    <CharacterSkinSelectionModal {...args} />
  </RPGUIRoot>
);

export const KnightSkins = Template.bind({});

// Example of different knight skins
const knightCharacters = [
  {
    name: 'Black Knight',
    textureKey: 'black-knight',
  },
  {
    name: 'Dragon Knight',
    textureKey: 'dragon-knight',
  },
  {
    name: 'Senior Knight',
    textureKey: 'senior-knight-1',
  },
];

KnightSkins.args = {
  isOpen: true,
  onClose: () => console.log('Modal closed'),
  onConfirm: (textureKey: string) => console.log('Selected skin:', textureKey),
  availableCharacters: knightCharacters,
  atlasJSON: atlasJSON,
  atlasIMG: atlasIMG,
  initialSelectedSkin: 'black-knight',
};
