oms-website-nextjs/components/BlogPostCard.tsx

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { FiCalendar, FiUser, FiArrowRight } from "react-icons/fi";

type BlogPostCardProps = {
  slug: string;
  title: string;
  excerpt: string;
  imageUrl: string;
  author: string;
  date: string;
};

const BlogPostCard: React.FC<BlogPostCardProps> = ({
  slug,
  title,
  excerpt,
  imageUrl,
  author,
  date,
}) => {
  return (
    <Link href={`/tech-talk/${slug}`} passHref>
      <div className="group bg-card border border-border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 ease-in-out flex flex-col h-full transform hover:-translate-y-1">
        {/* Image Container */}
        <div className="relative w-full aspect-video overflow-hidden">
          {imageUrl ? (
            <Image
              src={imageUrl}
              alt={title}
              fill // Use fill instead of layout
              className="object-cover transition-transform duration-500 group-hover:scale-105" // Use object-cover class
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            />
          ) : (
            // Optional: Placeholder if no image
            <div className="w-full h-full bg-muted flex items-center justify-center">
              <span className="text-muted-foreground text-sm">No Image</span>
            </div>
          )}
        </div>

        {/* Content Area */}
        <div className="p-5 flex flex-col flex-grow">
          <h3 className="text-xl font-semibold mb-2 text-foreground group-hover:text-primary transition-colors duration-200 line-clamp-2">
            {title}
          </h3>
          <p className="text-muted-foreground text-sm mb-4 flex-grow line-clamp-3">
            {excerpt}
          </p>

          {/* Meta Info */}
          <div className="text-xs text-muted-foreground/80 flex flex-wrap items-center gap-x-4 gap-y-1 mb-4">
            <span className="flex items-center">
              <FiUser className="w-3 h-3 mr-1.5" />
              {author}
            </span>
            <span className="flex items-center">
              <FiCalendar className="w-3 h-3 mr-1.5" />
              {date}
            </span>
          </div>

          {/* Read More Link */}
          <div className="mt-auto pt-2 border-t border-border/50">
            <span className="inline-flex items-center text-sm font-medium text-primary group-hover:underline">
              Read More
              <FiArrowRight className="ml-1.5 w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default BlogPostCard;