import PropTypes from "prop-types";
import { AnimatePresence } from "motion/react";
import clsx from "clsx";
import FieldError from "./FieldError";
import { useTranslation } from "react-i18next";

function FormSelect({ props, valid = true, className = "", options }) {
  const { t } = useTranslation();
  return (
    <div>
      <select
        {...props}
        className={clsx(
          `w-72 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey ${className}`,
          !valid && "border-error"
        )}
      >
        <option disabled value="">
          {t("select")}
        </option>
        {options?.map(({ value, label }) => (
          <option key={value} value={value}>
            {label}
          </option>
        ))}
      </select>
      <AnimatePresence>
        {!valid && <FieldError text={"Invalid value"} />}
      </AnimatePresence>
    </div>
  );
}

FormSelect.propTypes = {
  props: PropTypes.object,
  className: PropTypes.string,
  valid: PropTypes.bool,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
    })
  ).isRequired,
};

export default FormSelect;