import { Link } from "gatsby";
import { useSlug } from "../../hooks/use-slug";
import * as classNames from "classnames";
import * as styles from "./styles.module.scss";
import React from "react";
import Text, { Element } from "../Text";

interface IProps {
  className?: string;
  size: any;
  tags: [];
}

const Tags = ({ className, size, tags }: IProps) => {
  const categoryLocale = "categorie";

  return (
    <div
      className={classNames({
        [className]: !!className,
        [styles.tags]: true
      })}
    >
      <ul className={styles.list}>
        {tags.map((tag, index) => {
          return (
            <li key={index} className={styles.tag}>
              <Link
                className={styles.link}
                to={`/${categoryLocale}/${useSlug(tag)}`}
              >
                <Text element={Element.Span} size={size}>
                  {tag}
                </Text>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Tags;
