import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MLinearProgressbarPercentage from './MLinearProgressbarPercentage.vue';

const meta: Meta<typeof MLinearProgressbarPercentage> = {
  title: 'Indicators/Linear Progress Bar (Percentage)',
  component: MLinearProgressbarPercentage,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.',
      },
    },
  },
  argTypes: {
    value: {
      control: { type: 'range', min: 0, max: 100 },
    },
  },
  args: {
    value: 40,
    ariaLabel: 'Progress bar',
  },
  render: (args) => ({
    components: { MLinearProgressbarPercentage },
    setup() {
      return { args };
    },
    template: `
      <MLinearProgressbarPercentage v-bind="args"></MLinearProgressbarPercentage>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MLinearProgressbarPercentage>;

export const Standard: Story = {};