import Slot from '@/components/slot.jsx';

import DomDecorator from './dom-decorator.jsx';

import potion from '/assets/potion.png?url';

export default {
  title: 'Dom/Inventory/Slot',
  component: Slot,
  decorators: [
    DomDecorator({
      style: {
        border: '2px solid #999',
        lineHeight: 0,
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
      },
    }),
  ],
  tags: ['autodocs'],
  argTypes: {
    image: {
      control: 'text',
    },
    qty: {
      control: {
        type: 'number',
        min: 1,
        max: 9999,
      }
    },
  },
  args: {
    image: potion,
  },
};

export const Single = {
  args: {
    qty: 1,
  },
};

export const OneDigit = {
  args: {
    qty: 9,
  },
};

export const TwoDigit = {
  args: {
    qty: 99,
  },
};

export const ThreeDigit = {
  args: {
    qty: 999,
  },
};

export const FourDigit = {
  args: {
    qty: 9999,
  },
};