"use client";

import Image from "next/image";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import type { SunatRacingContent } from "@/services/sunat-racing.service";

interface SunatRacingBeritaSectionProps {
  news: SunatRacingContent["news"];
  sectionTitle: string;
  sectionSubtitle: string;
}

// Fallback data
const FALLBACK_NEWS = [
  {
    id: "1",
    slug: "sunat-nyaman-di-jogja-lihat-paket-diskon-natal",
    imageUrl: "/assets/sunat-racing/testimoni-1.jpg",
    category: { name: "Sunat Adera" },
    title: "Sunat nyaman di jogja , lihat paket diskon natalnya segera",
    excerpt: "Temukan informasi terbaru tentang layanan sunat di Klinik Adera dengan berbagai pilihan paket yang nyaman dan aman untuk buah hati Anda...",
  },
  {
    id: "2",
    slug: "gak-perlu-takut-lagi-orangtua-di-jogja",
    imageUrl: "/assets/sunat-racing/testimoni-2.png",
    category: { name: "Sunat Adera" },
    title: "Gak perlu takut lagi orangtua di jogja untuk anaknya sunat.",
    excerpt: "Prosedur sunat modern di Klinik Adera menggunakan metode terbaru yang minim rasa sakit dan proses pemulihan yang cepat...",
  },
  {
    id: "3",
    slug: "dokter-berpengalaman-di-luar-negeri",
    imageUrl: "/assets/sunat-racing/testimoni-3.png",
    category: { name: "Sunat Adera" },
    title: "Dokter ini sudah pengalaman di luar negeri tetang sunat.",
    excerpt: "Tim medis Klinik Adera terdiri dari dokter berpengalaman yang telah menangani ribuan kasus sunat dengan tingkat keberhasilan tinggi...",
  },
];

const SunatRacingBeritaSection = ({
  news,
  sectionTitle,
  sectionSubtitle,
}: SunatRacingBeritaSectionProps) => {
  const displayNews = news && news.length > 0 ? news : FALLBACK_NEWS;

  return (
    <section className="py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <h2 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-white tracking-tight max-w-3xl mb-8 leading-tight">
          {sectionTitle || "Informasi dan kabar seputar sunat di Klinik Adera"}
        </h2>

        {/* Horizontal Scroll Cards */}
        <div className="overflow-x-auto -mx-4 px-4 pb-4">
          <div className="flex gap-4 min-w-max">
            {displayNews.map((berita) => (
              <Link
                key={berita.id}
                href={`/sunat-racing/berita/${berita.slug}`}
                className="bg-white rounded-[28px] p-6 w-[380px] md:w-[460px] flex-shrink-0 block hover:shadow-lg transition-shadow"
              >
                {/* Image */}
                <div className="relative w-full aspect-[4/3] rounded-[20px] overflow-hidden mb-4">
                  <Image
                    src={berita.imageUrl || "/assets/sunat-racing/testimoni-1.jpg"}
                    alt={berita.title}
                    fill
                    className="object-cover"
                  />
                </div>

                {/* Content */}
                <div className="space-y-3">
                  {/* Category */}
                  <span className="text-[#54ADFF] font-semibold text-base">
                    {berita.category.name}
                  </span>

                  {/* Title */}
                  <h3 className="text-xl md:text-2xl font-medium text-black tracking-tight leading-tight">
                    {berita.title}
                  </h3>

                  {/* Excerpt */}
                  <p className="text-base text-black/50 leading-relaxed">
                    {berita.excerpt}
                  </p>

                  {/* Read More Link */}
                  <div className="flex items-center gap-1 text-[#003DD8] font-semibold text-lg underline group">
                    Baca Selengkapnya
                    <ChevronRight className="w-5 h-5 rotate-[-45deg] group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default SunatRacingBeritaSection;