import React from "react";
import Typography from "components/typography/Typography";
import { SVGKey } from "components/icons";
import { RouterLink } from "components/typography/RouterLink";
import classNames from "classnames";

type KeywordsProps = {
  children?: React.ReactNode;
  className?: string;
  emphasis?: "low" | "high";
  linkTo?: string;
};

export function ArticleKeywords({
  children,
  className,
  emphasis = "high",
  linkTo = "#",
}: KeywordsProps) {
  const keywords = React.Children.map(children, (keyword, i) => {
    return (
      <RouterLink to={linkTo}>
        <div
          className={classNames(
            "mr-1",
            "hover:text-blue-600",
            {
              "text-xs text-gray-500 leading-5": emphasis === "low",
              "text-base text-gray-900  px-2 border rounded hover:border-blue-600 border-gray-900":
                emphasis === "high",
            },
            className
          )}
        >
          <Typography>
            {keyword}
            {i != React.Children.count(children) - 1 && emphasis === "low"
              ? ","
              : null}
          </Typography>
        </div>
      </RouterLink>
    );
  });
  return (
    <div className="flex flex-row items-center">
      {emphasis === "low" ? (
        <SVGKey className="w-6 fill-gray-500 stroke-gray-500" />
      ) : null}
      <div
        className={classNames("flex flex-row", {
          "ml-2": emphasis === "low",
        })}
      >
        {keywords}
      </div>
    </div>
  );
}

ArticleKeywords.displayName = "ArticleKeywords";