import Image from "next/image";
import Link from "next/link";

/**
 * 列表页模板组件
 * @param {Object[]} items - 列表数据，需包含 title, image, content, slug 字段
 * @param {string} basePath - 详情页基础路径
 */
export default function ListPageTemplate({ items, basePath = "" }) {
  return (
    <section className="py-12 bg-white">
      <div className="max-w-5xl mx-auto px-4">
        <div className="space-y-10">
          {items.map((item) => (
            <div
              key={item.slug}
              className="flex flex-col md:flex-row items-center md:items-start gap-8 p-8 rounded-2xl shadow-lg bg-gray-50 hover:shadow-2xl transition-shadow"
            >
              <div className="flex-shrink-0 w-full md:w-56 h-40 relative overflow-hidden rounded-lg bg-gray-50">
                {item.image && (
                  <Image
                    src={item.image}
                    alt={item.title}
                    fill
                    className="object-cover object-center transition-transform duration-300 hover:scale-105"
                    sizes="(max-width: 768px) 100vw, 224px"
                  />
                )}
              </div>
              <div className="flex-1 w-full">
                <h2 className="!text-base  mb-2 text-gray-900">
                  <Link
                    href={`${basePath}/${item.slug}`}
                    className="!text-[#343f52] transition-colors hover:text-green-600 hover:!text-[#22b573]"
                  >
                    {item.title}
                  </Link>
                </h2>
                <p className="text-gray-600 text-base mb-4 line-clamp-3">
                  {item.content?.replace(/<[^>]+>/g, "").slice(0, 100)}{item.content?.replace(/<[^>]+>/g, "").length > 100 ? "..." : ""}
                </p>
                <Link
                  href={`${basePath}/${item.slug}`}
                  className="!text-[#343f52] inline-block px-6 py-2 bg-gradient-to-r from-green-400 to-green-600 text-white rounded-full font-semibold shadow hover:from-green-500 hover:to-green-700 transition-all !text-base hover:!text-[#22b573]"
                >
                  More
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}