import Image from 'next/image'
import Link from 'next/link'
import { getAssetUrl } from '@/lib/directus'
import type { Article } from '@/lib/types'

interface Props {
  article: Article
}

export default function ArticleCard({ article }: Props) {
  const href = `/${article.category.slug}/${article.slug}`

  return (
    <Link
      href={href}
      className="group block bg-bg-card border border-border rounded-md overflow-hidden hover:border-[#3a4560] transition-colors"
    >
      <div className="relative aspect-video bg-bg-elevated overflow-hidden">
        {article.featured_image ? (
          <Image
            src={getAssetUrl(article.featured_image, { width: 640, quality: 80 })}
            alt={article.title}
            fill
            className="object-cover"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        ) : (
          <div className="w-full h-full bg-bg-elevated" />
        )}
      </div>
      <div className="p-3">
        <p className="text-[10px] font-semibold text-text-muted uppercase tracking-widest mb-1.5">
          {article.category.name}
        </p>
        <h3 className="text-sm font-semibold text-text-primary leading-snug mb-3 line-clamp-2 group-hover:text-accent transition-colors">
          {article.title}
        </h3>
        <span className="text-xs font-semibold text-accent">Read →</span>
      </div>
    </Link>
  )
}