import Link from 'next/link'
import type { BlogPost } from '@startsimpli/api/blog'
import { cn } from '../../utils/cn'

export interface ArticleCardProps {
  post: BlogPost
  /** Destination href, e.g. `/blog/${post.slug}`. */
  href: string
  /** Pre-resolved image URL (use `getImageUrl` from the blog client). */
  imageSrc?: string
  /** Byline shown in the card footer (e.g. the site name). */
  byline?: string
  className?: string
}

/**
 * Article preview card for blog index grids. Server-renderable; themed via
 * shared tokens so it matches whichever app embeds it.
 */
export function ArticleCard({ post, href, imageSrc, byline, className }: ArticleCardProps) {
  const src = imageSrc ?? post.image
  return (
    <Link href={href} className={cn('group block h-full', className)}>
      <article className="bg-card rounded-xl shadow-sm border border-border hover:shadow-md transition-all overflow-hidden h-full flex flex-col">
        {src && (
          <div className="aspect-video bg-muted overflow-hidden">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={src}
              alt={post.title}
              loading="lazy"
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
            />
          </div>
        )}
        <div className="p-6 flex-1 flex flex-col">
          <h2 className="text-xl font-heading font-semibold text-foreground mb-3 group-hover:text-primary transition-colors line-clamp-2">
            {post.title}
          </h2>
          {post.excerpt && (
            <p className="text-muted-foreground text-sm mb-4 line-clamp-3 flex-1">{post.excerpt}</p>
          )}
          <div className="flex items-center justify-between text-sm text-muted-foreground mt-auto">
            {byline ? <span>{byline}</span> : <span />}
            {post.readTime && <span>{post.readTime}</span>}
          </div>
        </div>
      </article>
    </Link>
  )
}