import React from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { FieldLabel, SelectOption } from "../FirstPartCreateOffer.styled";
import { SelectField } from "../../CreateOffer.styled";

const OfferSubcategoryField = (props) => {
  const { t } = useTranslation();
  const formik = props.formik;
  return (
    <>
      <FieldLabel leftText={t("offer.subcategory")} />
      <SelectField
        defaultValue={formik.values.subcategory}
        onChange={(value) => {
          formik.setFieldValue("subcategory", value.target.value);
        }}
        value={formik.values.subcategory}
      >
        <SelectOption style={{ display: "none" }} value="default">
          {t("offer.choseSubcategory")}
        </SelectOption>
        {props.subcategories &&
          props.subcategories.map((sub, i) => {
            return (
              <SelectOption key={i} value={sub}>
                {sub}
              </SelectOption>
            );
          })}
      </SelectField>
    </>
  );
};

OfferSubcategoryField.propTypes = {
  formik: PropTypes.any,
  subcategories: PropTypes.array,
};

export default OfferSubcategoryField;
