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 HeroSection({ article }: Props) {
  const href = `/${article.category.slug}/${article.slug}`

  return (
    <section className="max-w-[1200px] mx-auto px-6 pt-10 pb-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-0 bg-bg-card border border-border rounded-lg overflow-hidden">
        <div className="relative aspect-video lg:aspect-auto lg:min-h-[320px] bg-bg-elevated">
          {article.featured_image ? (
            <Image
              src={getAssetUrl(article.featured_image, { width: 900, quality: 85 })}
              alt={article.title}
              fill
              priority
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 50vw"
            />
          ) : (
            <div className="absolute inset-0 bg-bg-elevated" />
          )}
        </div>

        <div className="p-8 flex flex-col justify-center">
          <div className="flex items-center gap-2 mb-4">
            <span className="bg-violet text-white text-[9px] font-bold uppercase tracking-widest px-2 py-1 rounded">
              Featured
            </span>
            <span className="text-[10px] font-semibold text-text-muted uppercase tracking-widest">
              {article.category.name}
            </span>
          </div>

          <h1 className="text-2xl lg:text-3xl font-bold text-text-primary leading-snug mb-4">
            {article.title}
          </h1>

          {article.excerpt && (
            <p className="text-sm text-text-secondary leading-relaxed mb-6">
              {article.excerpt}
            </p>
          )}

          <Link
            href={href}
            className="self-start inline-flex items-center gap-2 bg-accent text-black text-sm font-semibold px-5 py-2.5 rounded-sm hover:bg-accent-hover transition-colors"
          >
            Read article →
          </Link>
        </div>
      </div>
    </section>
  )
}