import type { Meta, StoryObj } from '@storybook/vue3'
import { ExtractPropTypes } from 'vue'
import { UProgressBar } from '../components'
import { UProgressBarProps } from '../components/UProgressBar/UProgressBar'

const meta: Meta<typeof UProgressBar> = {
  title: 'Example/ProgressBar',
  component: UProgressBar,
  tags: ['autodocs'],
  argTypes: {
    progress: {
      control: {
        type: 'range',
        min: 0,
        max: 100,
      },
    },
    label: {
      control: 'select',
      options: ['none', 'right', 'bottom', 'top floating', 'bottom floating'],
    },
    class: {
      type: [String, Array],
      default: null,
      required: false,
    },
  },
}

export default meta

type Story = StoryObj<typeof UProgressBar>

export const Primary: Story = {
  render: (args: ExtractPropTypes<UProgressBarProps>) => ({
    components: { UProgressBar },
    setup() {
      return { args }
    },

    template: `<div class="w-80 mx-auto">
      <UProgressBar v-bind="args" class="mt-5 mb-5 mx-auto"></UProgressBar></div>`,
  }),
  args: {
    progress: 0,
  } as UProgressBarProps,
}