import React, { useState } from "react";

import { LearnOuterWrapper, LearnInnerWrapper } from "./styled";

import Header from "../../components/Header/Header";
import TextareaWithLabel from "../../components/TextareaWithLabel/TextareaWithLabel";

const Learn: React.FC = () => {
  const [back, setBack] = useState("");
  const onChangeFront: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
    setBack(e.target.value);
  };
  return (
    <>
      <Header title="Lernen" />
      <LearnOuterWrapper>
        <LearnInnerWrapper>
          <TextareaWithLabel
            label="Vorderseite"
            value={"Front"}
            onChange={onChangeFront}
            disabled
          />
          <TextareaWithLabel
            label="Rückseite"
            value={back}
            placeholder={"answer here"}
            onChange={onChangeFront}
          />
        </LearnInnerWrapper>
      </LearnOuterWrapper>
    </>
  );
};

export default Learn;
