import Link from "next/link";
import Image from "next/image";
import { ImageIcon, User } from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { getFeaturedImageUrl, type WpPost } from "@/lib/wp-api";
import { formatDateShamsi } from "@/lib/format-date";

function stripHtml(html: string): string {
  return html.replace(/<[^>]*>/g, "").trim();
}

export function BlogPostCard({ post }: { post: WpPost }) {
  const excerpt = stripHtml(post.excerpt.rendered) || stripHtml(post.content.rendered).slice(0, 160);
  const modifiedDate = post.modified ? formatDateShamsi(post.modified) : null;
  const authorName = post._embedded?.author?.[0]?.name ?? null;
  const thumbnailUrl = getFeaturedImageUrl(post, "medium");

  return (
    <Link href={`/blog/${encodeURIComponent(post.slug)}`} className="block h-full">
      <Card className="h-full overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg pt-0 gap-1">
        {thumbnailUrl ? (
          <div className="relative aspect-video w-full overflow-hidden bg-muted">
            <Image
              src={thumbnailUrl}
              alt=""
              fill
              className="object-cover"
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            />
          </div>
        ) : (
          <div
            className="relative flex aspect-video w-full items-center justify-center overflow-hidden bg-muted"
            aria-hidden
          >
            <ImageIcon className="size-12 text-muted-foreground/50" />
          </div>
        )}
        <CardHeader className="pb-2">
          <CardTitle className="text-xl font-bold leading-tight line-clamp-2 mt-2">
            {post.title.rendered}
          </CardTitle>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground bg-muted inline-flex p-1 rounded-sm">
            {authorName && (
              <span className="inline-flex flex-1 items-center gap-1.5">
                <User className="size-3.5 shrink-0" aria-hidden />
                {authorName}
              </span>
            )}
            {modifiedDate && (
              <time dateTime={post.modified}>
                {modifiedDate}
              </time>
            )}
          </div>
        </CardHeader>
        <CardContent className="pt-0">
          <p className="text-muted-foreground text-sm leading-relaxed line-clamp-3">
            {excerpt}
          </p>
        </CardContent>
      </Card>
    </Link>
  );
}