text: import Link from 'next/link';
  
  import { categoryPathBySlug } from 'lib/categories';
  import { authorPathByName } from 'lib/users';
  import { formatDate } from 'lib/datetime';
  // import ClassName from 'models/classname';
  
  import { FaMapPin } from 'react-icons/fa';
  // import styles from './Metadata.module.scss';
  
  const DEFAULT_METADATA_OPTIONS = {
    compactCategories: true,
  };
  
  const Metadata = ({ author, date, categories, options = DEFAULT_METADATA_OPTIONS, isSticky = false }) => {
    // const metadataClassName = new ClassName(styles.metadata);
  
    // metadataClassName.addIf(className, className);
  
    const { compactCategories } = options;
  
    return (
      <ul className="">
        {author && (
          <li className="">
            <address>
              {author.avatar && (
                <img
                  width={author.avatar.width}
                  height={author.avatar.height}
                  src={author.avatar.url}
                  alt="Author Avatar"
                />
              )}
              By{' '}
              <Link href={authorPathByName(author.name)}>
                <a rel="author">{author.name}</a>
              </Link>
            </address>
          </li>
        )}
        {date && (
          <li>
            <time pubdate="pubdate" dateTime={date}>
              {formatDate(date)}
            </time>
          </li>
        )}
        {Array.isArray(categories) && categories[0] && (
          <li className="">
            {compactCategories && (
              <p title={categories.map(({ name }) => name).join(', ')}>
                <Link href={categoryPathBySlug(categories[0].slug)}>
                  <a>{categories[0].name}</a>
                </Link>
                {categories.length > 1 && ' and more'}
              </p>
            )}
            {!compactCategories && (
              <ul>
                {categories.map((category) => {
                  return (
                    <li key={category.slug}>
                      <Link href={categoryPathBySlug(category.slug)}>
                        <a>{category.name}</a>
                      </Link>
                    </li>
                  );
                })}
              </ul>
            )}
          </li>
        )}
        {isSticky && (
          <li className="">
            <FaMapPin aria-label="Sticky Post" />
          </li>
        )}
      </ul>
    );
  };
  
  export default Metadata;
  