import clsx from "clsx";

import type { Author as AuthorType } from "@/types";

import styles from "./styles.module.scss";

enum AuthorStyles {
  Solid = "solid",
  Ghost = "ghost",
}

export type AuthorVariant = `${AuthorStyles}`;

interface AuthorProps extends AuthorType {
  variant?: AuthorVariant;
}

export function Author({ name, variant = AuthorStyles.Ghost }: AuthorProps) {
  return <div className={clsx(styles.author, styles[variant])}>{name}</div>;
}

interface AuthorListProps {
  authors: AuthorType[];
  className?: string;
}

export function AuthorList({ authors, className }: AuthorListProps) {
  if (authors && authors.length > 0)
    return (
      <div className={clsx(styles.authorList, className)}>
        {authors.map(
          (author) => author && <Author key={author.id} {...author} />,
        )}
      </div>
    );
}