import React from "react";
import Select from "../../elements/Select";
import Block from "../../atoms/Block";
import Text from "../../atoms/Text";

import { SelectProps } from "../Select/Select";

export interface SelectTextProps<T> extends SelectProps<T> {
  message?: string;
}

const SelectText = <T,>(props: SelectTextProps<T>) => {
  const { message } = props;

  const elementProps = Object.assign({}, props);
  delete elementProps.message;
  delete elementProps.className;

  return (
    <Block className={`flex flex-col ${props.className}`}>
      <Select {...props}></Select>
      {message ? (
        <Text className="inline-flex py-2 text-xs font-light">{message}</Text>
      ) : (
        ""
      )}
    </Block>
  );
};

SelectText.displayName = "SelectText";

export default SelectText;
