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="/forum/news" className="text-sm text-nova-300 hover:text-white transition">
          All news →
        </a>
      </div>

      <div className="divide-y divide-nova-800 rounded-xl bg-panel overflow-hidden">
        {items.map((item) => (
          <a
            key={item.id}
            href={item.url}
            className="flex items-start justify-between gap-4 px-5 py-4 transition hover:bg-nova-800"
          >
            <span className="text-sm font-medium text-white line-clamp-2">{item.title}</span>
            {item.date && (
              <span className="flex-shrink-0 text-xs text-soft">{formatDate(item.date)}</span>
            )}
          </a>
        ))}
      </div>
    </section>
  )
}