import type { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import CreditsCounter from './CreditsCounter';

const meta: Meta<typeof CreditsCounter> = {
  title: 'Create/CreditsCounter',
  component: CreditsCounter,
  tags: ['autodocs'],
  argTypes: {
    creditsRemaining: { control: { type: 'number', min: 0, step: 100 } },
  },
};

export default meta;
type Story = StoryObj<typeof CreditsCounter>;

export const Basic: Story = {
  args: {
    creditsRemaining: 5000,
  },
};

function InteractiveDemo() {
  const [credits, setCredits] = useState(5000);
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
        alignItems: 'flex-start',
      }}
    >
      <CreditsCounter creditsRemaining={credits} />
      <div style={{ display: 'flex', gap: 8 }}>
        <button
          style={{ border: '1px solid white', borderRadius: 8, padding: 4 }}
          onClick={() => setCredits((c) => c + 500)}
        >
          +500
        </button>
        <button
          style={{ border: '1px solid white', borderRadius: 8, padding: 4 }}
          onClick={() => setCredits((c) => Math.max(0, c - 500))}
        >
          -500
        </button>
        <button
          style={{ border: '1px solid white', borderRadius: 8, padding: 4 }}
          onClick={() => setCredits(10)}
        >
          Set to 10
        </button>
        <button
          style={{ border: '1px solid white', borderRadius: 8, padding: 4 }}
          onClick={() => setCredits(100)}
        >
          Set to 100
        </button>
        <button
          style={{ border: '1px solid white', borderRadius: 8, padding: 4 }}
          onClick={() => setCredits(1000)}
        >
          Set to 1,000
        </button>
        <button
          style={{ border: '1px solid white', borderRadius: 8, padding: 4 }}
          onClick={() => setCredits(10000)}
        >
          Set to 10,000
        </button>
      </div>
    </div>
  );
}

export const Interactive: Story = {
  render: () => <InteractiveDemo />,
};