import { Meta, StoryObj } from '@storybook/react-webpack5';

import ProgressBar from './ProgressBar';
import Info from '../info';

export default {
  component: ProgressBar,
  title: 'Content/ProgressBar',
} satisfies Meta<typeof ProgressBar>;

type Story = StoryObj<typeof ProgressBar>;

export const Basic: Story = {
  args: {
    description: 'You have 3 days to reach your goal.',
    id: 'progress-bar-id',
    title: 'Send 5,550 GBP',
    progress: { value: 50, max: 100 },
    textEnd: '200 GBP to go',
  },
};

export const WithInfoTooltip: Story = {
  args: {
    description: <span>1,000 GBP</span>,
    id: 'progress-bar-id',
    title: (
      <span>
        Total limit <Info content="This is the total limit of your Wise account" />
      </span>
    ),
    progress: { value: 800, max: 1000 },
    textEnd: <span>200 GBP remaining</span>,
  },
};