import Link from "next/link";
import { FrontMatter } from "../types/types";

export interface BasicArticleProps extends FrontMatter {
  title: string;
  description: string;
  date: string;
  author: string;
  authorLink: string;
  thumbnail: string;
}
export const PostHeader = ({
  frontMatter,
  estTime,
}: {
  frontMatter: FrontMatter;
  estTime: number;
}) => {
  const { title, author, date, description, authorLink } =
    frontMatter as BasicArticleProps;

  return (
    <div className="flex items-start gap-2 flex-col">
      <div className="lg:text-5xl text-3xl font-bold mt-2 text-gray-50">
        {title}
      </div>
      <div className="mt-2 text-gray-600dark:text-gray-400 text-sm">{description}</div>
      <div className="mt-2 mb-10 flex lg:flex-row flex-col gap-2 items-start">
        {author && (
          <div className="font-medium ">
            By{" "}
            {authorLink && (
              <Link href={authorLink} className="dark:text-action text-primary">
                @{author}
              </Link>
            )}
            {!authorLink && (
              <span className="dark:text-action text-primary">@{author}</span>
            )}
          </div>
        )}
        <div className="text-sm font-medium text-gray-500 lg:before:content-['•'] lg:after:content-['•'] lg:before:pr-2 lg:after:pl-2">
          {date}
        </div>
        <div className="text-sm font-medium text-gray-500">
          {estTime} min read
        </div>
      </div>
    </div>
  );
};