import React from "react";

import { PostMetadata } from "@/types";
import Image from "next/image";
import Link from "next/link";

function BlogCard({
  title,
  slug,
  subtitle,
  imageUrl,
}: {
  title: string;
  slug: string;
  subtitle: string;
  imageUrl: string;
}) {
  return (
    <>
      <Link
        href={`/blogs/${slug}`}
        className="w-52 md:w-64 md:max-w-[300px] h-fit flex flex-col items-center flex-auto bg-white dark:bg-black p-10 rounded-xl"
      >
        <div className="w-full aspect-[4/3] bg-slate-400 rounded-lg overflow-hidden relative">
          <Image
            src={imageUrl}
            alt={title}
            className="w-full h-full object-cover"
            fill
          />
        </div>
        <div className="w-full h-2/5 ">
          <h1 className="h3 pt-4 pb-2 xl:pt-8 text-black dark:text-white">
            {title}
          </h1>
          <p className="text-black dark:text-white">{subtitle}</p>
        </div>
      </Link>
    </>
  );
}

export default BlogCard;
