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

import { Input as NychInput } from '@nychthemeron/library'

const meta = {
  title: 'Components/Input',
  component: NychInput,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof NychInput>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { NychInput },
    setup() {
      const value = ref('')
      return { value }
    },
    template: `<NychInput v-model="value" placeholder="Speak, traveller…" style="width: 18rem;" />`,
  }),
}

export const Filled: Story = {
  render: () => ({
    components: { NychInput },
    setup() {
      const value = ref('Charon')
      return { value }
    },
    template: `<NychInput v-model="value" style="width: 18rem;" />`,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychInput },
    setup() {
      const value = ref('Sealed')
      return { value }
    },
    template: `<NychInput v-model="value" disabled style="width: 18rem;" />`,
  }),
}