import Link from "next/link";
import { CalendarDays, Eye, Newspaper } from "lucide-react";
import type { Artikel } from "@/lib/types";
import { formatDate, stripHtml } from "@/lib/utils";

export function ArticleCard({ artikel }: { artikel: Artikel }) {
  return (
    <Link
      href={`/berita/${artikel.slug}`}
      className="group flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-soft"
    >
      <div className="relative flex h-40 items-center justify-center overflow-hidden bg-brand-deep">
        <div className="article-glow absolute inset-0 opacity-60" />
        <Newspaper className="relative h-10 w-10 text-white/70" />
        {artikel.kategori && (
          <span className="absolute left-3 top-3 rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur">
            {artikel.kategori.nama}
          </span>
        )}
      </div>
      <div className="flex flex-1 flex-col p-5">
        <h3 className="line-clamp-2 text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-primary">
          {artikel.judul}
        </h3>
        <p className="mt-2 line-clamp-2 flex-1 text-sm leading-relaxed text-muted-foreground">
          {artikel.ringkasan ?? stripHtml(artikel.isi)}
        </p>
        <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
          <span className="flex items-center gap-1.5">
            <CalendarDays className="h-3.5 w-3.5" />
            {formatDate(artikel.publishedAt ?? artikel.createdAt)}
          </span>
          <span className="flex items-center gap-1.5">
            <Eye className="h-3.5 w-3.5" />
            {artikel.dibaca}
          </span>
        </div>
      </div>
    </Link>
  );
}