import type { BlogPost } from "@/lib/blog-api";
import Image from "next/image";
import Link from "next/link";
import { CalendarDays, User } from "lucide-react";

interface BlogPostCardProps {
  post: BlogPost;
  variant?: "default" | "compact";
}

export default function BlogPostCard({
  post,
  variant = "default",
}: BlogPostCardProps) {
  const isCompact = variant === "compact";

  return (
    <Link
      href={`/blogs/${post.id}`}
      className="group block bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"
    >
      <div className="relative aspect-[16/9] overflow-hidden">
        <Image
          src={post.backgroundImage || "/placeholder.svg?height=400&width=600"}
          alt={post.title}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-105"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div className="absolute bottom-0 left-0 p-4 w-full">
          <span className="inline-block px-3 py-1 bg-red-600 text-white text-xs font-medium rounded-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0">
            Read Article
          </span>
        </div>
      </div>

      <div className="p-5">
        <div className="flex flex-wrap gap-4 items-center justify-between mb-3">
          <span className="px-3 py-1 bg-red-100 text-red-600 rounded-full text-xs font-medium">
            {post.category}
          </span>
          <span className="text-gray-500 flex items-center text-xs">
            <CalendarDays className="h-3 w-3 mr-1" />
            {post.author.date}
          </span>
        </div>

        <h3
          className={`font-bold text-gray-900 mb-2 line-clamp-2 ${isCompact ? "text-base" : "text-xl"}`}
        >
          {post.title}
        </h3>

        {!isCompact && (
          <p className="text-gray-600 mb-4 line-clamp-2">{post.description}</p>
        )}

        <div className="flex items-center">
          <div className="w-8 h-8 rounded-full overflow-hidden mr-3 bg-gray-200">
            {post.author.avatar ? (
              <Image
                src={post.author.avatar || "/placeholder.svg"}
                alt={post.author.name}
                width={32}
                height={32}
                className="object-cover w-full h-full"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center bg-red-100 text-red-600">
                <User className="h-4 w-4" />
              </div>
            )}
          </div>
          <span className="text-sm text-gray-700">omicron</span>
        </div>
      </div>
    </Link>
  );
}