import React, { ReactNode } from "react";

import { Link } from "./Link";

import styles from "./MiniNewsCard.module.css";

interface MiniNewsCardProps {
  date: Date;
  author: string;
  children: ReactNode;
  permalink: string;
  fit?: boolean;
}

export const MiniNewsCard: React.FC<MiniNewsCardProps> = ({
  date,
  author,
  children,
  permalink,
  fit = false,
}) => {
  const classes = fit ? [styles.card, styles.fit] : [styles.card];

  return (
    <article className={classes.join(" ")}>
      <h1 className={styles.date}>
        <time dateTime={date.toISOString()}>
          {date.toLocaleDateString("en-US", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </time>
      </h1>
      <address className={styles.author}>{author}</address>
      <div className={styles.content}>{children}</div>
      <Link href={permalink}>
        <span className={styles.mobileLearnMore}>Learn more</span>
      </Link>
    </article>
  );
};