import { Link } from "gatsby";
import * as styles from "./styles.module.scss";
import kebabCase from "lodash/kebabCase";
import React from "react";
import Text, { Element, Size, Color, LineHeight } from "../Text";

const TagCloud = ({ tags }) => {
  const categoryLocale = "categorie";

  return (
    <div className={styles.tags}>
      <div className={styles.padding}>
        <header className={styles.header}>
          <Text element={Element.H6} size={Size.Eyebrow1} color={Color.Faded1}>
            Categorie
          </Text>
        </header>
        <ul className={styles.list}>
          {tags.map(tag => (
            <li className={styles.item} key={tag.fieldValue}>
              <Link
                className={styles.link}
                activeClassName={styles.active}
                to={`/${categoryLocale}/${kebabCase(tag.fieldValue)}/`}
              >
                <Text
                  className={styles.name}
                  element={Element.Span}
                  size={Size.Tag1}
                  lineHeight={LineHeight.Title}
                >
                  {tag.fieldValue}
                </Text>
                <Text
                  className={styles.count}
                  element={Element.Span}
                  size={Size.P1}
                  color={Color.Faded1}
                >
                  {tag.totalCount}
                </Text>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default TagCloud;
