import React from 'react';
import { Form, Row, Col } from 'antd';
import InputSelect from '@/components/form/InputSelect';
import InputSearch from '@/components/form/InputSearch';

const TopHeader: React.FC = () => {
  const [form] = Form.useForm();
  const statusOptions = [
    { value: 1, label: 'Active' },
    { value: 2, label: 'Inactive' },
  ];
  const onFinish = (): void => {
    // Handle form submission here
  };
  const handleSearch = (): void => {
    form.submit();
  };

  return (
    <Form name="myForm" onFinish={onFinish} layout="horizontal">
      <Row gutter={16}>
        <Col span={4}>
          <InputSearch
            onSearch={() => {
              handleSearch();
            }}
          />
        </Col>
        <Col span={3}>
          <InputSelect
            name="config"
            placeholder=""
            label="Config"
            rules={[{ required: true, message: 'Please Select a Status!' }]}
            options={statusOptions}
            onSelect={(value) => {
              form.setFieldsValue({ Config: value });
            }}
          />
        </Col>
        <Col span={3}>
          <InputSelect
            name="budget"
            placeholder=""
            label="Budget"
            rules={[{ required: true, message: 'Please select a budget!' }]}
            options={statusOptions}
            onSelect={(value) => {
              form.setFieldsValue({ Budget: value });
            }}
          />
        </Col>
        <Col span={3}>
          <InputSelect
            name="status"
            placeholder=""
            label="Status"
            rules={[{ required: true, message: 'Please Select a Status!' }]}
            options={statusOptions}
            onSelect={(value) => {
              form.setFieldsValue({ status: value });
            }}
          />
        </Col>
      </Row>
    </Form>
  );
};

export default TopHeader;