import { useEffect, useState } from "react";
import { Select } from "antd";
import { useTranslation } from "react-i18next";

const { Option } = Select;

const ContractStatusComponent = ({ value, onChange, ref }) => {
  const [option, setOption] = useState(value);
  const { t } = useTranslation();

  useEffect(() => {
    if (value !== option && onChange) {
      onChange(option);
    }
  }, [value, option, onChange]);

  return (
    <Select ref={ref} value={option} style={{ width: 100 }} onChange={setOption}>
      <Option value="contracts.status.new">{t("contracts.status.new")}</Option>
      <Option value="contracts.status.out">{t("contracts.status.out")}</Option>
      <Option value="contracts.status.returned">{t("contracts.status.out")}</Option>
    </Select>
  );
};

ContractStatusComponent.displayName = "ContractStatusComponent";

export default ContractStatusComponent;
