import React from 'react'
import List from 'antd-mobile/es/list'
import MonthDayPicker, { MonthDayPickerValue } from '../month-day-picker'

export type MonthDayPickerItemValue = MonthDayPickerValue
export interface MonthDayPickerItemProps {
  value?: MonthDayPickerItemValue
  onChange?: (value: MonthDayPickerItemValue) => void
  children?: React.ReactNode
}

export default class MonthDayPickerItem extends React.Component<
  MonthDayPickerItemProps
> {
  public render() {
    const { children, ...props } = this.props
    return (
      <MonthDayPicker {...props}>
        {(value, onClick) => (
          <List.Item
            arrow="horizontal"
            extra={`${value[0]}月${value[1]}号`}
            onClick={onClick}
          >
            {children}
          </List.Item>
        )}
      </MonthDayPicker>
    )
  }
}