import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Clock3 } from "lucide-react";
import type { BlogPost } from "@/lib/types";

export function BlogPostCard({ post }: { post: BlogPost }) {
  const publicationDate = post.published_at
    ? new Intl.DateTimeFormat("fr-FR", { day: "numeric", month: "long", year: "numeric" }).format(
        new Date(post.published_at)
      )
    : "";

  return (
    <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-brand-sand/40 bg-white">
      <Link href={`/blog/${post.slug}`} className="relative block aspect-[16/10] overflow-hidden bg-brand-cream">
        {post.cover_image_url ? (
          <Image
            src={post.cover_image_url}
            alt={post.image_alt || post.title}
            fill
            sizes="(min-width: 1024px) 33vw, 100vw"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-sm text-brand-charcoal/40">
            L&apos;Uni-Verre de Jessica
          </div>
        )}
      </Link>
      <div className="flex flex-1 flex-col p-5">
        <div className="mb-3 flex flex-wrap items-center gap-3 text-xs">
          <span className="font-medium uppercase tracking-wider text-brand-gold">{post.category}</span>
          <span className="flex items-center gap-1 text-brand-charcoal/60">
            <Clock3 size={13} />
            {post.reading_time_minutes} min
          </span>
        </div>
        <h3 className="mb-2 font-serif text-xl leading-snug text-brand-black">
          <Link href={`/blog/${post.slug}`} className="transition-colors hover:text-brand-gold">
            {post.title}
          </Link>
        </h3>
        <p className="mb-5 line-clamp-3 flex-1 text-sm leading-relaxed text-brand-charcoal/70">
          {post.excerpt}
        </p>
        <div className="flex items-center justify-between gap-3 border-t border-brand-sand/30 pt-4">
          <span className="text-xs text-brand-charcoal/60">{publicationDate}</span>
          <Link
            href={`/blog/${post.slug}`}
            className="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-brand-gold transition-all hover:gap-2"
          >
            Lire <ArrowRight size={14} />
          </Link>
        </div>
      </div>
    </article>
  );
}