import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import ShowMore from './ui/ShowMore'
import { NewsProps } from '@/app/types'

const News: React.FC<NewsProps> = ({ news }) => {
  if (!news || news.length === 0) {
    return null
  }
  return (
    <div className="w-full max-w-[1250px] mx-auto px-4 sm:px-6 mb-20">
      <h2 className="text-3xl sm:text-4xl text-center font-bold mb-10">
        Последние новости
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {news.map((item) => (
          <Link href={`/news/${item.slug}`} key={item.id}>
            <div className="flex flex-col bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-2xl transition-shadow duration-500 p-6">
              <div className="relative h-[200px]">
                <Image
                  src={
                    item.titleImage.startsWith('http')
                      ? item.titleImage
                      : `http://127.0.0.1:8000${item.titleImage}` ||
                        '/placeholder-image.jpg'
                  }
                  alt={item.title}
                  fill
                  className="object-cover rounded-2xl"
                />
              </div>
              <div className="pt-6">
                <h3 className="text-base font-semibold mb-3">{item.title}</h3>
                <ShowMore text={item.content} />
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}

export default News