import React, { FormHTMLAttributes, useCallback } from 'react'

import { Form, FormProps, FormItem } from 'react-icecream'

export default function Demo() {
  return (
    <PresentationalForm layout="horizontal" verticalGap="16px" labelWidth="4em">
      <FormItem label="订单 ID">8901234567</FormItem>
      <FormItem label="订单状态">待处理</FormItem>
      <FormItem label="订单备注">请尽快发货</FormItem>
    </PresentationalForm>
  )
}

function PresentationalForm({ children, ...restProps }: FormProps<HTMLDivElement>) {

  const Div = useCallback((props: FormHTMLAttributes<HTMLDivElement>) => (
    <div {...props} />
  ), [])

  return (
    <Form<HTMLDivElement>
      labelColor="light"
      labelVerticalAlign="text"
      footer={null}
      as={Div}
      {...restProps}
    >
      {children}
    </Form>
  )
}