import React from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import useIsMobile from "../../../../../hooks/useIsMobile";
import { FieldLabel } from "../FirstPartCreateOffer.styled";
import { DescriptionField } from "./OfferDescriptionField.styled";

const OfferDescriptionField = (props) => {
  const formik = props.formik;
  const { t } = useTranslation();
  const { isMobile } = useIsMobile();
  return (
    <>
      <FieldLabel leftText={t("offer.productDescription")} />
      {!isMobile ? (
        <DescriptionField
          name="description"
          placeholder={t("offer.description")}
          margin="normal"
          italicPlaceholder
          value={formik.values.description}
          onChange={formik.handleChange}
          error={formik.touched.description && formik.errors.description}
          helperText={formik.touched.description && formik.errors.description}
          fullWidth
          multiline
          minRows={4}
          height={"100px"}
        />
      ) : (
        <DescriptionField
          name="description"
          placeholder={t("offer.description")}
          margin="normal"
          italicPlaceholder
          value={formik.values.description}
          onChange={formik.handleChange}
          error={formik.touched.description && formik.errors.description}
          helperText={formik.touched.description && formik.errors.description}
          fullWidth
        />
      )}
    </>
  );
};

OfferDescriptionField.propTypes = {
  formik: PropTypes.any,
};

export default OfferDescriptionField;
