import React from 'react'

function formatDate(dateStr) {
  if (!dateStr) return ''
  try {
    return new Date(dateStr).toLocaleDateString('en-US', {
      year: 'numeric', month: 'short', day: 'numeric',
    })
  } catch {
    return ''
  }
}

export default function HomeNews({ items }) {
  if (!Array.isArray(items) || items.length === 0) return null

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex items-center justify-between">
        <h2 className="text-xl font-bold text-white">News &amp; Updates</h2>
        <a href="/news" className="text-sm text-nova-300 hover:text-white transition">
          All news →
        </a>
      </div>

      <div className="divide-y divide-nova-800 overflow-hidden rounded-[24px] border border-white/10 bg-panel">
        {items.map((item) => (
          <a
            key={item.id}
            href={item.url}
            className="grid gap-3 px-5 py-4 transition hover:bg-nova-800 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"
          >
            <div className="min-w-0">
              {item.eyebrow ? <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-nova-300">{item.eyebrow}</div> : null}
              <div className="mt-1 text-sm font-medium text-white line-clamp-2">{item.title}</div>
              {item.excerpt ? <p className="mt-2 text-sm leading-6 text-soft line-clamp-2">{item.excerpt}</p> : null}
            </div>
            {item.date ? <span className="flex-shrink-0 text-xs text-soft">{formatDate(item.date)}</span> : null}
          </a>
        ))}
      </div>
    </section>
  )
}