import { AutoComplete as AntdAutocomplete } from "antd";
import React from "react";
import downArrow from "../../assets/icons/downArrow.svg";
import HelperText from "../HelperText/HelperText";
import styled from "styled-components";
import Label from "../Label/Label";

const StyledDivContainer = styled.div`
  width: 100%;
`;

const StyledAutoComplete = styled(AntdAutocomplete)`
  width: 100%;
`;

const AutoComplete = (props) => {
  const { label, error, status, required, helperText, inputRef, style, ...rest } = props;

  return (
    <StyledDivContainer className="veris-autocomplete-wrapper">
      {label && <Label label={label} required={required} />}
      <StyledAutoComplete
        status={status || (error ? "error" : "")}
        style={{ minWidth: 220, ...(style || {}) }}
        maxTagCount="responsive"
        ref={inputRef}
        {...rest}
      />
      {helperText && <HelperText error={status === "error" || error}>{helperText}</HelperText>}
    </StyledDivContainer>
  );
};

export default AutoComplete;