import Link from "next/link";
import { BlogPost } from "@/content/blog";
import { ArrowUpRight } from "lucide-react";
import { BlogCoverArt } from "./blog-cover-art";

interface BlogCardProps {
  post: BlogPost;
}

export function BlogCard({ post }: BlogCardProps) {
  return (
    <article className="group relative flex flex-col overflow-hidden rounded-2xl border border-border/80 bg-card text-card-foreground shadow-xs transition-all duration-300 hover:-translate-y-1 hover:border-foreground/30 hover:shadow-lg motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      {/* Visual Thumbnail Header */}
      <Link
        href={`/blog/${post.slug}`}
        aria-label={post.title}
        className="block overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {post.featuredImage ? (
          <div className="relative aspect-[16/9] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-800">
            <img
              src={post.featuredImage}
              alt={post.featuredImageAlt || post.title}
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
              loading="lazy"
            />
          </div>
        ) : (
          <BlogCoverArt illustration={post.coverIllustration} variant="card" />
        )}
      </Link>

      {/* Content Body */}
      <div className="flex flex-1 flex-col justify-between p-5 sm:p-6">
        <div className="space-y-2.5">
          {/* Category Tag */}
          <div className="flex items-center justify-between">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
              {post.category}
            </span>
            <span className="text-[11px] font-medium text-muted-foreground/80">
              {post.readTime}
            </span>
          </div>

          {/* Title */}
          <h3 className="text-base font-bold leading-snug tracking-tight text-foreground sm:text-lg">
            <Link
              href={`/blog/${post.slug}`}
              className="line-clamp-2 transition-colors duration-200 hover:text-[var(--accent-cyan-text)] group-hover:text-[var(--accent-cyan-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-xs"
            >
              {post.title}
            </Link>
          </h3>

          {/* Excerpt */}
          <p className="line-clamp-3 text-xs leading-relaxed text-muted-foreground sm:text-sm">
            {post.excerpt}
          </p>
        </div>

        {/* Footer Meta */}
        <div className="mt-5 flex items-center justify-between border-t border-border/50 pt-4 text-xs text-muted-foreground">
          <span>{post.publishedDate}</span>

          <Link
            href={`/blog/${post.slug}`}
            className="flex items-center gap-1 font-semibold text-foreground transition-colors duration-200 group-hover:text-[var(--accent-cyan-text)] hover:text-[var(--accent-cyan-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xs"
          >
            <span>Read</span>
            <ArrowUpRight className="size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 motion-reduce:transition-none" />
          </Link>
        </div>
      </div>
    </article>
  );
}