import { ReactNode } from "react";
import { InputContainer } from "../../Input.styled";
import {
  SelectInputButtonContainer,
  SelectInputStyle,
} from "./SelectInput.styled";
import { red } from "../../../../core/colors/colors";

export type SelectInputProps<T extends ReactNode | ReactNode[]> = {
  value: string;
  children: T;
  onError?: () => boolean;
  disable?: boolean;
  placeholder?: string;
};

const SelectInput = ({
  value,
  children,
  onError = () => false,
  disable = false,
  placeholder,
}: SelectInputProps<ReactNode | ReactNode[]>) => {
  return (
    <InputContainer>
      <SelectInputStyle
        value={value}
        disabled={disable}
        placeholder={placeholder}
        style={{ borderColor: onError() ? red[500] : "" }}
        readOnly
      />
      <SelectInputButtonContainer>{children}</SelectInputButtonContainer>
    </InputContainer>
  );
};

export default SelectInput;
