import * as React from 'react';
import * as PropTypes from 'prop-types';

import classNames from '../../../utils/classnames';
import './index.css';
import { ConfigProvider, Form as TeaForm } from 'tea-component';
import { usePlatform } from '../../../utils/platform';

export default function Form({
  // 系统属性
  className,
  // 组件属性
  // title,
  // description,
  // tips,
  contentSlot,
  // buttonSlot,
  style,
  id,
}) {
  const platform = usePlatform();
  const cls = classNames({
    'weda-ui': true,
    'weda-form': true,
    'weui-form': platform === 'h5',
    [className]: className,
  });
  if (platform === 'pc') {
    return (
      <ConfigProvider classPrefix="wedatea2td">
        <TeaForm className={cls} style={style} id={id}>
          {contentSlot}
        </TeaForm>
      </ConfigProvider>
    );
  }
  return (
    <div className={cls} style={style} id={id}>
      {/* <div className="weui-form__text-area">
        {title ? <h2 className="weui-form__title">{title}</h2> : null}
        {description ? (
          <div className="weui-form__desc">{description}</div>
        ) : null}
      </div> */}
      {/* <div className="weui-form__control-area"> */}
      <div className="weui-cells__group weui-cells__group_form">
        {contentSlot}
      </div>
      {/* </div> */}
      {/* <div className="weui-form__tips-area">
        <p className="weui-form__tips">{tips}</p>
      </div> */}
      {/* <div className="weui-form__opr-area">{buttonSlot}</div> */}
    </div>
  );
}
