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,
}) => {
  console.log("BlogPostCard Props:", { imageUrl });

  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 h-48 overflow-hidden">
          <Image
            src={imageUrl}
            alt={title}
            layout="fill"
            objectFit="cover"
            className="transition-transform duration-500 group-hover:scale-105"
          />
          {/* Optional: Subtle overlay on hover */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></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;