import Link from "next/link";
import BackgroundImage from "./BackgroundImage";
import { formatDate } from "../lib/lib";

export default function PostPreview(props) {
  const section = props?.section ? props.section : "blog";
  return (
    <div className={`cursor-pointer ${props.className}`}>
      {props.title ? <h3 className="mb-2">{props.title}</h3> : null}

      <Link
        href={`/${section}/${props.post.slug}`}
        key={`post-${props.post.slug}`}
      >
        <div>
          <BackgroundImage
            className="aspect-w-5 aspect-h-4 rounded-lg"
            src={props.post.extra.image || ""}
          />

          <h4 className="mt-2">{props.post.title}</h4>
          <div className="flex items-baseline mt-1">
            {props.post.extra.author ? (
              <div className="type-sub-bold mr-2">
                {props.post.extra.author}
              </div>
            ) : null}
            {props.post.extra.ship ? (
              <div className="type-sub-bold text-gray font-mono">
                {props.post.extra.ship}
              </div>
            ) : null}
          </div>
          <div className="text-gray type-sub mt-1">
            {formatDate(new Date(props.post.date))}
          </div>
        </div>
      </Link>
    </div>
  );
}

PostPreview.defaultProps = {
  className: "",
};