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

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

export function ArticleAuthors({
  children,

  className,
  emphasis = "high",
  linkTo = "#",
}: AuthorsProps) {
  const authors = React.Children.map(children, (author, i) => {
    return (
      <RouterLink to={linkTo}>
        <Typography
          fontWeightVariant={emphasis === "high" ? "medium" : "normal"}
          className={classNames(
            "hover:text-blue-600",
            {
              "text-xs leading-5 text-gray-500": emphasis === "low",
              "text-lg leading-6 text-gray-900": emphasis === "high",
            },
            {
              "mr-1": i != React.Children.count(children) - 1,
            },
            className
          )}
        >
          {author}
          {i != React.Children.count(children) - 1 ? "," : null}
        </Typography>
      </RouterLink>
    );
  });

  return (
    <div className="flex flex-row items-center">
      <SVGUser className="w-6 fill-gray-500 stroke-gray-500"></SVGUser>
      <div className="ml-2 flex flex-row">{authors}</div>
    </div>
  );
}

ArticleAuthors.displayName = "ArticleAuthors";
