import { InputHTMLAttributes, useContext } from "react";

import { Context } from "../../contexts/Context";

import styles from "./Input.module.scss";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name?: string;
  color?: string;
  backgroundColor?: string;
}

export default function Input({
  name,
  color,
  backgroundColor,
  ...rest
}: InputProps) {
  const { inputValue } = useContext(Context);

  return (
    <div
      className={styles.container}
      style={{
        borderBottom: `3px solid ${color}`,
      }}
    >
      <input
        name={name}
        type="text"
        onChange={(event) => {
          event.target.value;
        }}
        disabled
        autoComplete="off"
        value={inputValue}
        {...rest}
      />
    </div>
  );
}