import type { Meta, StoryObj } from '@storybook/vue3'
import { ProgressCircleProps } from '@/types/progressCircleProps'
import { UProgressCircle } from '../components'
import { UProgressCircleProps } from '../components/UProgressBar/UProgressCircle'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UProgressCircle> = {
  title: 'Example/ProgressCircle',
  component: UProgressCircle,
  tags: ['autodocs'],
  argTypes: {
    progress: {
      control: {
        type: 'range',
        min: 0,
        max: 100,
      },
      defaultValue: 0,
    },
    shape: {
      control: 'select',
      options: ['circle', 'semi-circle'],
    },
    size: {
      control: 'select',
      options: ['xxs', 'xs', 'sm', 'md', 'lg'],
    },
    label: { control: 'text' },
  },
}

export default meta

type Story = StoryObj<typeof UProgressCircle>

export const Primary: Story = {
  render: (args: ExtractPropTypes<UProgressCircleProps>) => ({
    components: { UProgressCircle },
    setup() {
      return { args }
    },
    template: `<UProgressCircle v-bind="args" class="mt-10 mb-10 flex justify-center w-full">
      </UProgressCircle>`,
  }),
  args: {
    size: 'xxs',
  } as UProgressCircleProps,
}