import DropdownList from './dropdown-list.vue'
import { useArkUi } from '../../composables/use-ark-ui'
import api from '../../api'

useArkUi({
  api,
  responseTotalKey: 'count',
  responseItemsKey: 'results',
  paginationType: 'limit',
})

export default {
  title: 'The Design system/Dropdowns/Dropdown List',
  component: DropdownList,
  tags: ['autodocs'],
  args: {
    endpoint: 'article',
    placeholder: 'Плейсхолдер',
    count: 50,
  },
}

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <div style="gap: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr;">
          <DropdownList
            {...args }
          />
        </div>
        Нижележащий текст
      </div>
    )
  },
})

export const Primary = Template.bind({})