import { useState } from 'react'
import { DateInput } from '@astryxdesign/core/DateInput'
import { Grid } from '@astryxdesign/core/Grid'
import { Selector } from '@astryxdesign/core/Selector'

type DateString =
  `${number}${number}${number}${number}-${number}${number}-${number}${number}`

export function SelectorsDemo() {
  const [fruit, setFruit] = useState<string | undefined>()
  const [date, setDate] = useState<DateString | undefined>()

  return (
    <Grid columns={{ minWidth: 220, max: 2 }} gap={5}>
      <Selector
        label="最喜欢的水果"
        options={['苹果', '香蕉', '橙子', '芒果', '菠萝']}
        placeholder="请选择一种水果"
        value={fruit}
        onChange={setFruit}
        width="100%"
      />
      <DateInput
        label="开始日期"
        placeholder="选择日期"
        value={date}
        onChange={setDate}
        hasClear
        width="100%"
      />
    </Grid>
  )
}