import type { ReactNode } from "react";

type ReadingCardProps = {
  title: string;
  minutes: number;
  children?: ReactNode;
};

// Type annotations and JSX, together on the page.
export function ReadingCard({
  title,
  minutes,
  children,
}: ReadingCardProps) {
  return (
    <article className="reading-card">
      <h2>{title}</h2>
      <p>{minutes} minutes of quiet reading</p>
      {children && <div>{children}</div>}
    </article>
  );
}