import classNames from "classnames";
import { initial, isEmpty, omit } from "lodash";
import React from "react";
import "../index.css";

type Props = {
    inGroup?: boolean,
    placeholder?: string | undefined;
    className?: string | undefined;
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "">;

const inputNotInGroup = [
    `border
    border-2
    border-solid
    border-gray-200
    hover:border-gray-500
    active:border-gray-500
    focus:border-gray-500`
]

const inputInGroup = [
    `border-none
    hover:none
    active:none
    focus:none
    `
]

export const TextInput = ({
    inGroup = false, // We should use this flag to choose how we will style our text input component
    placeholder,
    className,
    ...props
}: Props) => {

  return (
    <input
      type="text"
      placeholder={placeholder}
      className={classNames([
        "w-full",
        "text-gray-900",
        "rounded",
        "outline-none",
        "placeholder-text-500",
        {   
            //it this part we define how we style 
            [`${inputNotInGroup}`] : !inGroup,
            [`${inputInGroup}`] : inGroup,
        },
        className,        
      ])}
    />
  );
};
