import React from "react";

import { DecksOuterWrapper, DecksInnerWrapper } from "./styled";

import Header from "../../components/Header/Header";
import { useFetchCardDeckByIdQuery } from "../../features/cardDecks/cardDeck-api-slice";
import { Link, useParams } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

const Decks: React.FC = () => {
  const { id } = useParams();
  const { data, isFetching } = useFetchCardDeckByIdQuery(Number(id));
  return (
    <>
      <Header title={`Stapel${isFetching ? "" : `: ${data?.title}`}`} />
      <DecksOuterWrapper>
        {isFetching ? (
          <div>Loading</div>
        ) : (
          <>
            <DecksInnerWrapper>
              <h2>{data?.description}</h2>
              <div className="flex">
                {data?.cards.map((card) => (
                  <span key={card.id}>
                    <div className="deck">
                      <div className="title">{card.front}</div>
                      <div className="desc">{card.back}</div>
                    </div>
                  </span>
                ))}
                <Link to="new">
                  <div className="centered">
                    <FontAwesomeIcon icon={faPlus} size="3x" />
                  </div>
                </Link>
              </div>
            </DecksInnerWrapper>
          </>
        )}
      </DecksOuterWrapper>
    </>
  );
};

export default Decks;
