import Link from "next/link"
import type { Post } from "@/lib/api"

interface PostPreviewProps {
  post: Post
}

export function PostPreview({ post }: PostPreviewProps) {
  return (
    <div className="group post-card p-6 rounded-lg hover:bg-secondary/30 transition-all duration-300">
      <Link href={`/posts/${post.slug}`} className="block no-underline">
        <h2 className="text-2xl font-bold tracking-tight mb-2 post-link group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-pink-600 group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
          {post.metadata.title}
        </h2>
        <time dateTime={post.metadata.date} className="text-muted-foreground block mb-3">
          {new Date(post.metadata.date).toLocaleDateString("en-US", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </time>
        <p className="text-muted-foreground line-clamp-2">{post.metadata.excerpt}</p>
      </Link>
    </div>
  )
}