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

const CourtesyCarStatusComponent = ({ 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}
      options={[
        { value: "courtesycars.status.in", label: t("courtesycars.status.in") },
        { value: "courtesycars.status.inservice", label: t("courtesycars.status.inservice") },
        { value: "courtesycars.status.out", label: t("courtesycars.status.out") },
        { value: "courtesycars.status.sold", label: t("courtesycars.status.sold") },
        { value: "courtesycars.status.leasereturn", label: t("courtesycars.status.leasereturn") },
        { value: "courtesycars.status.unavailable", label: t("courtesycars.status.unavailable") }
      ]}
    />
  );
};
export default CourtesyCarStatusComponent;
