import { Link } from "@tanstack/react-router";
import type { Post } from "@/content/posts";

const categoryColors: Record<Post["category"], string> = {
  "Agendamento IA": "bg-fuchsia-500/15 text-fuchsia-300 border-fuchsia-500/30",
  "CRM WhatsApp": "bg-emerald-500/15 text-emerald-300 border-emerald-500/30",
  "Atendentes de IA": "bg-orange-500/15 text-orange-300 border-orange-500/30",
  "Estratégia": "bg-sky-500/15 text-sky-300 border-sky-500/30",
};

export function PostCard({ post, featured = false }: { post: Post; featured?: boolean }) {
  const date = new Date(post.date).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    timeZone: "UTC",
  });

  return (
    <Link
      to="/blog/$slug"
      params={{ slug: post.slug }}
      className={`group flex flex-col overflow-hidden rounded-2xl border border-border bg-card/60 backdrop-blur transition hover:-translate-y-1 hover:border-foreground/30 hover:shadow-2xl ${
        featured ? "md:col-span-2 md:flex-row" : ""
      }`}
    >
      <div
        className={`relative flex items-center justify-center bg-gradient-to-br ${post.cover.gradient} ${
          featured ? "aspect-[16/10] md:aspect-auto md:w-1/2" : "aspect-[16/10]"
        }`}
      >
        <span className={`select-none ${featured ? "text-8xl" : "text-7xl"}`} aria-hidden>
          {post.cover.emoji}
        </span>
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
      </div>
      <div className={`flex flex-1 flex-col gap-3 p-6 ${featured ? "md:p-8" : ""}`}>
        <div className="flex items-center gap-2 text-xs">
          <span className={`rounded-full border px-2.5 py-1 font-medium ${categoryColors[post.category]}`}>
            {post.category}
          </span>
          <span className="text-muted-foreground">{date}</span>
          <span className="text-muted-foreground">· {post.readingMinutes} min</span>
        </div>
        <h3
          className={`font-bold leading-tight text-foreground transition group-hover:text-foreground ${
            featured ? "text-2xl md:text-3xl" : "text-xl"
          }`}
        >
          {post.title}
        </h3>
        <p className="line-clamp-3 text-sm text-muted-foreground">{post.excerpt}</p>
        <div className="mt-auto pt-2 text-sm font-semibold text-foreground/80 group-hover:text-foreground">
          Ler artigo →
        </div>
      </div>
    </Link>
  );
}