import Link from 'next/link'
import { urlForImage } from '@/sanity/image'

export interface NewsItem {
  readonly _id: string
  readonly title: string
  readonly slug?: string
  readonly excerpt?: string
  readonly heroImage?: any
  readonly publishedAt?: string
}

export default function NewsCard({ item }: { item: NewsItem }) {
  const href = item.slug ? `/news/${item.slug}` : '#'
  const imageBuilder = urlForImage(item.heroImage)
  const imageUrl = imageBuilder
    ? imageBuilder.width(800).height(450).fit('crop').auto('format').url()
    : undefined

  const formattedDate = item.publishedAt
    ? new Date(item.publishedAt).toLocaleDateString(undefined, {
        year: 'numeric', month: 'short', day: '2-digit'
      })
    : null

  return (
    <Link href={href} className="block group focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 rounded-2xl">
      <div className="relative overflow-hidden rounded-2xl bg-white shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700 dark:bg-gray-800">
        {/* Image */}
        <div className="relative h-40 w-full overflow-hidden">
          {imageUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={imageUrl}
              alt={item.title}
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
              loading="lazy"
            />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800" />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent" />

          {formattedDate && (
            <div className="absolute top-3 left-3 z-10">
              <span className="inline-flex items-center rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium text-slate-700 backdrop-blur-sm dark:bg-slate-900/60 dark:text-slate-200">
                {formattedDate}
              </span>
            </div>
          )}
        </div>

        {/* Body */}
        <div className="p-4">
          <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1 line-clamp-2 group-hover:text-brand-600 transition-colors">
            {item.title}
          </h3>
          {item.excerpt && (
            <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
              {item.excerpt}
            </p>
          )}

          <div className="mt-4 flex items-center justify-between">
            <div className="text-xs text-slate-500 dark:text-slate-400">
              Read more
            </div>
            <div className="h-8 w-8 inline-flex items-center justify-center rounded-full bg-slate-100 text-slate-700 transition group-hover:bg-brand-50 group-hover:text-brand-600 dark:bg-slate-700 dark:text-slate-200">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
        </div>

        <div className="absolute inset-0 rounded-2xl ring-2 ring-brand-500/0 group-hover:ring-brand-500/20 transition-all duration-300 pointer-events-none"></div>
      </div>
    </Link>
  )
}