import Link from "next/link";
import Image from "next/image";
import { formatDate } from "@/lib/utils";
import { ArrowRightIcon } from "lucide-react";
import { type Post } from "@/lib/posts";

interface BlogCardProps {
  post: Post;
}

export function BlogCard({ post }: BlogCardProps) {
  // Generate a gradient placeholder for the post image
  const placeholderImage = `data:image/svg+xml;base64,${Buffer.from(
    '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect width="400" height="300" fill="#667eea"/><rect width="400" height="300" fill="url(#gradient)"/><defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#667eea"/><stop offset="100%" stop-color="#764ba2"/></linearGradient></defs></svg>'
  ).toString('base64')}`;
  
  return (
    <div className="space-y-4">
      <Link href={`/labs/${post.slug}`} className="block">
        <div className="rounded-lg overflow-hidden aspect-video relative mb-2 md:mb-4">
          <Image
            src={post.ogImage || placeholderImage}
            alt={post.title}
            fill
            className="object-cover transition-transform hover:scale-105 duration-300"
          />
        </div>
      </Link>
      <div>
        <div className="flex items-center gap-2 text-muted-foreground mb-2 text-sm">
          <span>{post.author}</span>
          <span>—</span>
          <span>{formatDate(post.publishedAt)}</span>
        </div>
        <Link href={`/labs/${post.slug}`} className="group">
          <h3 className="text-xl font-bold mt-2 md:mt-0 mb-2 group-hover:text-primary transition-colors">
            {post.title}
          </h3>
        </Link>
        <Link href={`/labs/${post.slug}`} className="inline-flex items-center text-primary font-medium hover:underline">
          Read Full Article <ArrowRightIcon className="w-4 h-4 ml-1" />
        </Link>
      </div>
    </div>
  );
}