import { Form, Input, Button, Row, Col } from 'antd'
import PropTypes from 'prop-types'

// const selectores = {
//   consejoElectoral: {
//     name: "v1/consejo-electoral",
//   },
// }

const Formulario = ({
  form,
  onFinish,
  botones = []
}) => {
  return (
    <Form
      layout="vertical"
      name="basic"
      form={form}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={() => { }}
    >
      <Row gutter={16}>
        <Col span={12}>
          <Row gutter={10}>
            <Col span={12}>
              <Form.Item
                // label="Búsqueda"
                name="q"
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  // style={{ marginTop: "30px" }}
                  block
                >
                  Buscar
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Col>
        <Col span={12}>
          <Row gutter={10} justify={'end'}>
            {botones.map((i, index) => (
              <Col>
                {
                  Boolean(i?.text) ? (
                    <Button
                      key={`btnGroup-${index}`}
                      onClick={i.onClick}
                      {...i.props}
                    >
                      {i.icon} {i.text}
                    </Button>
                  ) : (
                    <Button
                      key={`btnGroup-${index}`}
                      onClick={i.onClick}
                      icon={i.icon}
                      {...i.props}
                    />
                  )
                }
              </Col>
            ))}
          </Row>
        </Col>
      </Row>
    </Form>
  )
}

export default Formulario

Formulario.propTypes = {
  form: PropTypes.object.isRequired,
  onFinish: PropTypes.func.isRequired,
}