import type { NextPage } from "next";
import Link from "next/link";
import { ExpressionSetCard } from "../../components/ExpressionSetCard";
import { Page } from "../../components/Page";
import { useExpressionData } from "../../hooks/useExpressionData";

const ExpressionSetListPage: NextPage = () => {
  const { expression_sets, expression_to_expression_set } = useExpressionData();

  return (
    <Page>
      <div className="content-list">
        {expression_sets.map(({ id, name, description }) => (
          <Link
            key={id}
            href={{
              pathname: "/expression-sets/details",
              query: { "set-id": id },
            }}
            passHref
          >
            <a>
              <ExpressionSetCard
                name={name}
                description={description}
                word_count={
                  expression_to_expression_set.filter(
                    (item) => item.expression_set_id === id
                  ).length
                }
              />
            </a>
          </Link>
        ))}
      </div>
    </Page>
  );
};

export default ExpressionSetListPage;