import { Select, Space, Tag } from "antd";
import React, { forwardRef } from "react";
import { useTranslation } from "react-i18next";
const { Option } = Select;
//To be used as a form element only.

const EmployeeSearchSelect = ({ options, ...props }, ref) => {
  const { t } = useTranslation();

  return (
    <Select
      showSearch
      // value={option}
      style={{
        width: 400,
      }}
      optionFilterProp="search"
      {...props}
    >
      {options
        ? options.map((o) => (
            <Option
              key={o.id}
              value={o.id}
              search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}
            >
              <Space>
                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}

                <Tag color="green">
                  {o.flat_rate
                    ? t("timetickets.labels.flat_rate")
                    : t("timetickets.labels.straight_time")}
                </Tag>
              </Space>
            </Option>
          ))
        : null}
    </Select>
  );
};
export default forwardRef(EmployeeSearchSelect);
