import { useState } from 'react'
import { TagInput } from './index.js'
import { Badge } from '../Badge/index.js'

export const String = () => {
  const [value, setValue] = useState<string[]>([])

  return <TagInput value={value} onChange={setValue} variant="string" />
}

export const Number = () => {
  const [value, setValue] = useState<number[]>([])

  return <TagInput value={value} onChange={setValue} variant="number" />
}

export const Boolean = () => {
  const [value, setValue] = useState<boolean[]>([])

  return <TagInput value={value} onChange={setValue} variant="boolean" />
}

export const Enum = () => {
  const [value, setValue] = useState<string[]>([])

  return (
    <TagInput
      value={value}
      onChange={setValue}
      variant="enum"
      options={[
        { value: 'draft', label: <Badge color="orange-subtle">Draft</Badge> },
        {
          value: 'published',
          label: <Badge color="green-subtle">Published</Badge>,
        },
      ]}
    />
  )
}

export const DateTime = () => {
  const [value, setValue] = useState<number[]>([])

  return <TagInput value={value} onChange={setValue} variant="date-time" />
}
