import Link from "next/link";
import Image from "next/image";
import type { BlogPost } from "@/lib/blog";

export default function BlogCard({ post }: { post: BlogPost }) {
  const formattedDate = new Date(post.publishedAt).toLocaleDateString("pl-PL", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  const categoryLabel = post.category === "case-study" ? "Case Study" : "Blog";
  const categoryColor = post.category === "case-study" ? "bg-purple-500/10 text-purple-400" : "bg-cyan-500/10 text-cyan-400";

  return (
    <Link href={`/blog/${post.slug}/`}>
      <article className="bg-gray-800 border border-gray-700 rounded-2xl p-6 hover:border-cyan-500/50 hover:-translate-y-1 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 h-full flex flex-col group">
        <div className="mb-4 rounded-xl overflow-hidden bg-gray-700 relative h-48">
          <Image
            src={post.coverImage || '/blog/ai-automation.jpg'}
            alt={post.title}
            fill
            className="object-cover group-hover:scale-105 transition-transform duration-300"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </div>
        <div className="flex items-center gap-3 mb-3">
          <span className={`px-3 py-1 rounded-full text-xs font-medium ${categoryColor}`}>{categoryLabel}</span>
          <time className="text-gray-500 text-sm" dateTime={post.publishedAt.toISOString()}>
            {formattedDate}
          </time>
        </div>
        <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-cyan-400 transition-colors">
          {post.title}
        </h3>
        <p className="text-gray-400 leading-relaxed mb-4 flex-grow">{post.excerpt}</p>
        <div className="flex items-center justify-between pt-4 border-t border-gray-700">
          <div className="flex flex-wrap gap-2">
            {(Array.isArray(post.tags) ? post.tags : [post.tags]).slice(0, 3).map((tag) => (
              <span key={tag} className="text-xs text-gray-500">
                #{tag}
              </span>
            ))}
          </div>
          <span className="text-cyan-400 text-sm font-medium group-hover:translate-x-1 transition-transform">
            Czytaj więcej →
          </span>
        </div>
      </article>
    </Link>
  );
}